CSS unit converter
Convert between px, rem, em, pt and percent instantly, with a configurable root font size. Edit any field and the rest follow.
| px | rem | em | pt |
|---|
About CSS units: px, rem, em, pt and %
Front-end developers convert between CSS units constantly, and the arithmetic is deceptively fiddly because some units are absolute and others are relative to a font size that can change. A pixel is fixed, a rem is measured against the page's root font size, an em is measured against its own element's font size, a point comes from the world of print, and a percentage is relative to a parent value. Getting these conversions right matters for building layouts that are both precise and accessible, and doing the sums in your head dozens of times a day is exactly the kind of small friction a converter removes. Enter a value in any unit here and the rest are worked out instantly, with the root and base font sizes fully under your control.
History of CSS units
Most of these units date back to the very first CSS specification, CSS1, published by the W3C in 1996, which already defined px, em, pt and percentages by drawing on decades of typographic tradition — the point in particular comes from print, where it has meant a fraction of an inch since the days of metal type. For years the pixel was tied to the physical screen, but as displays multiplied in density the specification redefined the CSS pixel as a reference unit equal to 1/96 of an inch, independent of any single device. The rem unit arrived much later, introduced in the CSS Values and Units Module Level 3 and gaining reliable browser support around 2011 and 2012. It was created to solve a real frustration with em — its compounding, context-dependent behaviour — by giving developers a relative unit anchored to a single, predictable root.
How to convert between CSS units
Every conversion here pivots through pixels. To turn rem into pixels you multiply by the root font size, so at the default 16px root, 1.5rem is 24px; to go back you divide. The em unit works the same way but against the base or parent font size rather than the root, which is why this tool gives you a separate control for it. Points are absolute: since a point is 1/72 of an inch and the CSS pixel is 1/96 of an inch, one point equals 96/72 — about 1.333 — pixels, and one pixel is 0.75 points. Percentages, in the font-size context, mirror em exactly, with 100% equal to 1em of the base size. Because everything routes through pixels, changing the root or base font size recalculates all the relative units at once.
When to use each CSS unit
The modern default for most sizing is rem, because it scales with the user's chosen browser font size and keeps an entire design proportional from one root value — a genuine accessibility benefit. Em is ideal for self-contained components whose padding, margins and icons should grow and shrink together with their text. Pixels remain the right tool when a size must be exact and must not scale, such as a hairline border. Points belong almost exclusively to print stylesheets and to matching designs handed over in points from a word processor or PDF. Percentages shine for fluid, container-relative sizing. Knowing which unit expresses your intent — and being able to convert freely between them — is part of writing CSS that is both robust and considerate of the reader.
Frequently asked questions
What is the difference between px, rem and em?
A px (pixel) is an absolute unit — 16px is always 16px regardless of any other setting. A rem is relative to the root font size, the font size set on the html element, which is 16px by default in every browser, so 1rem equals 16px unless you change the root. An em is also relative, but to the font size of the current element or its parent rather than the root, so its real value depends on where it sits in the document. In short, px is fixed, rem scales from one global setting, and em scales from its local context.
How do I convert px to rem?
Divide the pixel value by the root font size. With the default root of 16px, 24px ÷ 16 = 1.5rem, and 12px ÷ 16 = 0.75rem. To go the other way, multiply: 2rem × 16 = 32px. If your project sets a different root font size, change the root value in this converter and every result updates to match. The px-to-rem table above lists the most common sizes at a 16px root so you can look them up at a glance.
Why does em depend on a parent or base font size?
The em unit is defined relative to the font size of the element it is used on, which is normally inherited from its parent. That makes em powerful for building components that scale as a whole — set padding in em and it grows with the text — but it also means there is no single fixed answer for what 1em is without knowing the context. This converter lets you set that context with the base font size field, so you can see exactly what 1.5em becomes for an element whose font size is, say, 20px.
What is the default root font size in browsers?
Every major browser uses a default root font size of 16px, applied to the html element unless a stylesheet or the user overrides it. This is why 1rem is almost always 16px and why designers reach for 16px as the baseline for body text. Importantly, users can change this default in their browser settings for readability, and rem-based layouts respect that choice while pixel values ignore it — which is a key accessibility reason to build with rem.
When should I use rem instead of px?
Use rem for anything that should scale with the user's preferred text size — font sizes, spacing, and layout dimensions — because rem honours the reader's browser settings and keeps a whole design proportional from a single root value. Reach for px when you genuinely need a fixed size that must not scale, such as a one-pixel border or a hairline divider. Many modern design systems set sizes in rem almost everywhere for accessibility and consistency, keeping px for the rare details that must stay exact.
How does pt relate to px?
A point (pt) is a print unit equal to 1/72 of an inch, while the CSS reference pixel is defined as 1/96 of an inch. That makes 1pt equal to 96/72, or 1.3333, pixels, and 1px equal to 0.75pt. So 12pt — a common document body size — works out to 16px, which is why 12pt and 16px both feel like standard reading sizes. Points mainly matter when you are producing print stylesheets or matching a design specified in a word processor; for screen work, px, rem and em are the natural choices.