REM and EM are both font-relative CSS length units, but they preserve different relationships. REM follows the document root; EM follows the relevant element context. That difference matters more than memorizing a default pixel conversion.
The relationship each unit preserves
One rem resolves from the computed font size of the root element. If the root computes to 16px, 1.5rem computes to 24px anywhere in the document unless another mechanism changes the root size.
One em resolves from a local font-size context. For most properties it relates to the font size of the element where the value is used. When em is used to set font-size itself, the parent font size supplies the context. This makes em valuable for components but easier to misunderstand in nested typography.
html { font-size: 16px; }
.card { font-size: 20px; }
.card h2 { margin-bottom: 1em; } /* 20px */
.card p { font-size: 1rem; } /* 16px */Choose the unit from the intended behavior
Use rem when a value should remain connected to a document-level type or spacing scale. This is common for shared design tokens, page headings, and spacing that should respond consistently to a root-size change.
Use em when a value belongs to the component that contains it. Icon size, control padding, and gaps can scale naturally with a component's font size when expressed in em.
- Choose rem for global rhythm and cross-component consistency.
- Choose em for local proportional relationships.
- Use unitless line-height when descendants should inherit a multiplier rather than a computed length.
- Inspect computed styles instead of assuming every context is 16px.
Why EM values can compound
If a parent has font-size: 1.25em and a child also has font-size: 1.25em, the child scales from the parent's computed size. With a 16px starting context, the parent becomes 20px and the child becomes 25px.
Compounding is not a browser error. It follows the local relationship expressed by em. Avoid accidental multiplication by using rem for levels that should share the root scale or by limiting where component font-size is redefined.
Change the root and component font sizes independently in the REM/EM/PX matrix to confirm which relationship your component needs.
A reliable conversion workflow
Start with the intended computed pixel size, identify the correct font-size context, and divide. For rem, divide by the root size. For em, divide by the relevant element or parent size. Keep the context documented beside design tokens so later changes remain understandable.
Conversion alone does not make an interface accessible. Verify browser zoom, text-only zoom where available, long content, component nesting, and user font preferences in the rendered application.
Sources and further reading
These references define the technical behavior described in this guide. Project-specific computed values should still be verified in the rendered application.
Last reviewed: August 17, 2026