px vs em vs rem in CSS: Sizing Rules and Examples

A CSS pixel is an absolute CSS length unit. For font-size, em refers to the parent's computed font size; on most other properties it refers to the element's own font size. Rem refers to the root element's font size. The choice affects how a component responds to inherited sizes and user preferences, but no unit alone establishes accessibility.

Use the PX to REM converter or REM to PX converter when you know the root size. For related layout utilities, browse the design tools.

px, em, and rem compared

A CSS pixel is not necessarily one physical display pixel. Browsers map CSS lengths to the display. The CSS Values and Units specification defines these reference relationships.

How to convert pixels and rem

Divide pixels by the root font size to obtain rem. Multiply rem by the root font size to obtain pixels.

The base is an input, not a universal constant. A browser default is often 16px, but stylesheets and user preferences can change it. Inspect the root element's computed font size when matching an existing page.

Why nested em font sizes multiply

Start with a 16px parent and give each nested list item a font size of 1.25em. The first level becomes 20px, the next 25px, and the next 31.25px. Each child uses its parent's computed size.

With a 16px root, a font size of 1.25rem remains 20px at each level. This can be useful when a nested list should keep the same text size. It is a design decision rather than a rule that em should never be used.

Em-based padding solves a different problem. If a button has 0.75em vertical padding, its padding follows its own font size. Increasing that font size also increases the internal spacing without requiring a separate padding value.

Font preferences and browser zoom are different

Rem responds to the root font size. If the root follows the browser's preferred font size, rem-based text follows that preference too. If the stylesheet fixes the root in pixels, rem no longer has that same relationship to the preference.

Browser zoom is separate: it can enlarge content sized in pixels as well as content sized in relative units. Avoid claims that pixel-sized text cannot be enlarged at all. The important outcome is whether a reader can increase text size and still read content and operate controls.

WCAG's Resize Text guidance addresses resizing without loss of content or functionality. Test the actual layout rather than treating a unit conversion as a conformance check.

Choosing units for a component

• Use rem when values should share a root-based scale.
• Use em when spacing should follow the local text size.
• Use px when an explicit CSS length fits the requirement, then check the result under zoom.
• Avoid fixed heights that clip enlarged text, regardless of which unit sets the font.
• Check long labels and nested content before copying a pattern throughout a project.

A practical sizing review

1. Inspect the computed root and component font sizes.
2. Record the intended relationship: root-based, local-text-based, or explicit length.
3. Convert values using that base rather than assuming 16px everywhere.
4. Check text enlargement, wrapping, overflow, and access to controls.
5. Compare narrow and wide layouts with realistic content.

The CSS Grid generator and Flexbox generator can provide layout starting points. Their previews do not replace checking the final page with its real text and responsive constraints.