The debate over CSS units has been going on since the early days of the web. px vs em vs rem appears in style guide disagreements, code review comments, and accessibility audits. The confusion persists because each unit has genuine trade-offs and the right choice genuinely depends on context. This guide explains what each unit actually does and when each one is appropriate.
px: absolute pixels
A CSS pixel (px) is not the same as a physical screen pixel. It is defined as 1/96th of an inch at arm's length viewing distance, and on high-density (retina) displays, the browser maps one CSS pixel to two or more physical pixels. What matters for developers is that px values are absolute: 16px is always 16px, regardless of the user's browser font size setting or the parent element's font size.
This absoluteness is both px's strength and its weakness. It is predictable and easy to reason about. But it ignores the user's preferences. If a user has set their browser base font size to 20px (a common accessibility setting for people with low vision), text set to 14px in your CSS will still be 14px: potentially too small for them to read comfortably. For properties other than font size (borders, shadows, spacing unrelated to text), px is generally appropriate.
rem: relative to the root
rem stands for root em. One rem equals the font size of the root element (the html element). By default, browsers set the root font size to 16px, making 1rem equal to 16px. But if the user has changed their browser font size preference, the root font size changes accordingly, and all rem values scale proportionally.
This is the key benefit of rem: it respects the user's font size preference while remaining consistent throughout your document. 1rem is always relative to the same baseline: the root: so nesting elements does not cause compounding. rem is the recommended unit for font sizes, spacing, and layout values that should scale with user preferences.
em: relative to the parent
One em equals the font size of the element's parent. If a parent div has font-size: 20px, then 1em inside that div equals 20px. This context-sensitivity is useful in some cases: padding and margin values set in em scale proportionally when the component's font size changes, keeping spacing visually consistent. But em values compound when nested: an element inside two elements with font-size: 1.2em has an effective font size of 1.44em (1.2 × 1.2), which can lead to surprising results in deeply nested components.
When to use each unit
- •Font sizes: use rem. Respects user preferences, consistent base, no compounding.
- •Spacing (padding, margin) tied to component text size: use em. The spacing scales with the component's font size, which is usually what you want.
- •Spacing not tied to text (layout gaps, grid gutters): use rem or px. Both are reasonable; rem scales with user preferences, px is more predictable.
- •Borders and shadows: use px. These rarely need to scale with font size.
- •Viewport-relative layout: use vw, vh, vmin, vmax. For elements that should be proportional to the viewport rather than content.
- •Media query breakpoints: use em or rem. px-based media queries do not respond to user font size settings, which can break layouts for accessibility users.
The rem conversion formula
Converting from px to rem is simple when the root font size is the default 16px: divide the pixel value by 16. 24px becomes 1.5rem. 14px becomes 0.875rem. 32px becomes 2rem. If your project uses a different root font size, divide by that value instead. Some teams set html { font-size: 62.5% } which makes 1rem equal to 10px, simplifying mental arithmetic: 24px becomes 2.4rem. This technique is a matter of preference, not a technical requirement.
AlteredIdea's px to rem Converter instantly converts between pixel and rem values at any base font size. Useful when migrating an existing codebase from px to rem or checking converted values during development.