256 Tools

CSS Unit Converter (px / rem / em)

Equivalents
px16px
rem1rem
em1em
pt12pt
%100%

Related external sites

Some links are affiliate links.

JetBrainsA developer tooling company behind popular IDEs like IntelliJ IDEA, WebStorm, PyCharm, and Rider. Known for deep code intelligence, refactoring support, and built-in debugging tools. Offers an All Products Pack subscription for access to the full suite.AmazonThe world's largest online marketplace for shopping, electronics, books, software, and more. Fast shipping, easy returns, and a vast product catalog make it a go-to for everyday purchases. Prime membership adds streaming, free shipping, and exclusive deals.

Related tools

Color Format ConverterConvert a color to HEX, RGB, HSL, HSV, and CMYK, and copy ready-to-paste code for CSS, SwiftUI, Android, and Flutter — in your browser.Base64 Encode / DecodeEncode text to Base64 or decode Base64 to text instantly — UTF-8 safe (Japanese & emoji work), URL-safe Base64, image to data URL with preview. All in your browser.Flexbox PlaygroundToggle flex-direction, justify-content, align-items, wrap and gap with a live preview, then copy the CSS. A fast way to learn and build flex layouts. In your browser.CSS clamp() GeneratorTurn a min and max size plus viewport range into a fluid CSS clamp() value for responsive typography and spacing, with a live preview. Runs in your browser.

Convert a CSS length between px, rem, em, pt and percent. Because rem depends on the root font size and em and percent depend on the parent (base) font size, you can set both — the default is 16px, the browser standard. Enter a value, pick its unit, and see every equivalent at once. Everything runs in your browser.

How to use

  1. Enter a value and choose its unit.
  2. Set the root font size, and the base size for em/%.
  3. Read or copy the equivalent in each unit.

How it works

Every value is first converted to pixels: rem multiplies by the root font size, em multiplies by the base (parent) font size, pt uses the CSS ratio of 96/72, and percent is the base size times the value over 100. From pixels, the tool converts back to each unit. That's why a 1.5rem at a 16px root equals 24px, and 12pt equals 16px.

A value converts to pixels, then to rem, em, pt and percent.1.5rem→24px→em / pt / %

Features

All units at once

See px, rem, em, pt and % together for one value.

Custom root & base

Set the root and parent font sizes that rem, em and % depend on.

Copy any unit

Grab the exact value you need for your CSS.

Private & instant

All conversion runs in your browser; nothing is uploaded.

When to use it

Responsive design

Convert pixel mockups into scalable rem units.

Accessibility

Use rem so text respects the user's font size.

Components

Work out em values relative to a component's font size.

Print styles

Convert between pt and px for print CSS.

Notes

  • rem is relative to the root (html) font size.
  • em and percent are relative to the parent (base) font size.
  • pt uses the standard 96/72 ratio (1pt = 1.333px).
  • All calculations run on your device; nothing is uploaded.

FAQ

What's the difference between rem and em?
rem is relative to the root font size, while em is relative to the parent element's font size. Set both sizes here.
Why is the default 16px?
16px is the default root font size in most browsers, so 1rem equals 16px unless changed.
How is pt converted?
Using the CSS ratio of 96/72, so 1pt is about 1.333px and 12pt equals 16px.
What does percent convert against?
Percent is relative to the base (parent) font size, like em — 100% equals the base size.
Is my data uploaded?
No. Everything is converted in your browser and nothing leaves your device.

We use cookies for ads and analytics.