Open any CSS file and you'll find sizes written three different ways: font-size: 16px, font-size: 1rem, font-size: 1em. On a default browser setup, all three can render identically — yet they behave completely differently the moment a user resizes their text, or a component gets nested somewhere unexpected. Picking the wrong one is a common source of layouts that look fine in development and break in the real world.
PX — The Absolute Unit
Pixels (px) are an absolute CSS unit. 16px means exactly 16px, everywhere, regardless of any font-size setting on the page or the user's browser preferences. That predictability is also its weakness: if someone increases their browser's default text size — common among users with low vision — anything sized in raw px stays exactly the same, while the text around it grows. The layout can quickly look cramped, overlapping, or misaligned.
REM — Relative to the Root
rem ("root em") is always relative to the font-size set on the root <html> element — which defaults to 16px in every major browser unless a stylesheet overrides it. So 1.5rem always means 1.5 × root font-size, no matter how deeply nested the element is or what its parent's font-size happens to be. This consistency is exactly why rem has become the default recommendation for typography, spacing, and layout dimensions: the whole page scales together and predictably when the root size changes.
EM — Relative to the Parent
em is relative to the current element's own (inherited) font-size — not the root. That makes em genuinely useful for sizing something in proportion to its immediate container (e.g. an icon that should always be "1.2× the size of the text next to it"), but it also compounds: if a 2em element sits inside another 2em element, the innermost one renders at 4× the base size, not 2×. That compounding is easy to lose track of in a deeply nested component tree, which is why em is best reserved for narrow, deliberate cases rather than page-wide sizing.
Why REM Matters for Accessibility
WCAG 1.4.4 (Resize Text) expects text to scale up to 200% without loss of content or function. If your spacing and typography are in rem, increasing the browser's default font size scales the entire page proportionally — text, margins, and layout stay in sync. If they're in px, only the text a user manually zooms grows, while everything measured in px stays fixed, which is exactly the kind of mismatch that breaks a resized layout.
Quick Reference
| Unit | Relative to | Scales with browser text-size setting? | Best for |
|---|---|---|---|
px | Absolute (fixed) | No | Borders, hairlines, fixed icon sizes |
rem | Root (<html>) font-size | Yes | Typography, spacing, layout dimensions |
em | Parent element's font-size | Yes | Sizing relative to a specific component |
The Math Behind the Conversion
Converting between them is simple division and multiplication: rem = px ÷ root font-size, and px = rem × root font-size. At the standard 16px root, that makes 24px = 1.5rem, 32px = 2rem, and 8px = 0.5rem. The math itself is easy — the part that gets tedious is doing it by hand for an entire design spec, or double-checking it every time a design system's base font size changes.
Don't do the math by hand.
Convert PX to REM (and EM) instantly, with a custom root font size, a full reference chart, bulk conversion for entire lists, and ready-to-paste CSS snippets.
Open the Pixel to REM ConverterOnce your sizes are in rem, the next question is usually how they should scale between viewport widths — that's exactly what clamp() is for. Our CSS Clamp Generator builds the fluid clamp() value for you, complete with a live curve preview so you can see the scaling before you ship it.