What is the difference between rem, em, and px
px is an absolute, fixed unit. em is relative to the current element's font-size and compounds when nested. rem is relative to the root (html) font-size — consistent, no compounding. Use rem for scalable, accessible sizing; em for things that should scale with their local context.
Three length units, differing in what they're relative to.
px — absolute
A fixed, absolute unit. 16px is always 16px (1 CSS pixel; the browser maps it to device pixels). Predictable, but doesn't respond to the user's font-size preference — if a user bumps their browser's default font size for accessibility, px values don't scale.
em — relative to the current element's font-size
1em = the computed font-size of the element itself (or, for non-font properties like padding/margin, the element's font-size).
The catch: it compounds when nested. If a <ul> has font-size: 1.5em and contains a nested <ul> also 1.5em, the inner one is 1.5 × 1.5 = 2.25× the parent. Deeply nested em sizing drifts unpredictably.
rem — relative to the root font-size
1rem = the font-size of the root <html> element (default 16px). It's relative, so it respects the user's browser font setting — but because it's always anchored to root, it never compounds. 1.5rem is the same everywhere regardless of nesting.
When to use which
rem— the default for most sizing: font sizes, spacing, layout. Scalable and accessible (honors user preferences), consistent (no compounding).em— when something should scale relative to its local context: e.g. a button's padding inemso it grows with the button's own font-size; an icon sized1emto match adjacent text.px— when you genuinely want a fixed value: borders (1px), hairlines, sometimes precise small details. But avoid it for font sizes — it breaks user zoom/font-size accessibility.
The accessibility angle (the senior point)
The reason rem/em matter: they respond to the user's browser font-size setting, px doesn't. Sizing fonts and spacing in rem means a low-vision user who increases their default font size gets a usably scaled layout. That's why "use rem for typography" is an accessibility recommendation, not just a style one.
The framing
"px is absolute and fixed. em is relative to the element's own font-size and compounds through nesting — which makes it drift unpredictably. rem is relative to the root font-size, so it's consistent everywhere and never compounds. I default to rem for fonts and spacing because it scales with the user's browser font preference — an accessibility win px can't give — and use em deliberately when something should scale with its local context, and px only for truly fixed details like borders."
Follow-up questions
- •Why does em compound and rem doesn't?
- •Why is rem better than px for accessibility?
- •Give a case where em is the right choice over rem.
- •What does setting font-size on the html element do to rem values?
Common mistakes
- •Using px for font sizes — breaks user font-size/zoom preferences.
- •Using em for everything and getting unpredictable compounding.
- •Thinking rem is relative to the parent — it's relative to the root.
- •Not knowing em can be relative to the element's own font-size for non-font properties.
Performance considerations
- •No rendering performance difference — this is purely about maintainability, scalability, and accessibility, not speed.
Edge cases
- •Deeply nested elements all using em.
- •Changing the html font-size to rescale the whole rem-based layout at once.
- •Media queries using em vs px (em queries respond to font-size).
- •User overriding the browser default font size.
Real-world examples
- •Design systems sizing typography and spacing scales entirely in rem.
- •Button/badge components using em padding so they scale with their font-size.