REM conversion is simple only after the computed root font size is known. This guide explains where that value comes from, how project CSS can change it, and why accessibility testing matters.
What REM reads from the document
The rem unit is equal to the computed em value on the root element. In HTML documents, that is normally the html element. A declaration such as font-size: 18px on html therefore makes 1rem resolve to 18px.
Browsers commonly begin around 16px, but the CSS specification defines the relationship, not a universal 16px result. Browser defaults, user preferences, and author styles can all affect the computed value.
html { font-size: 16px; }
.title {
font-size: 2rem; /* 32px in this context */
}Pixels, percentages, and the 62.5% shortcut
Some stylesheets set the root to 62.5% so that a typical 16px default becomes 10px and decimal rem arithmetic looks easier. The shortcut is context-dependent because a percentage still resolves from the user's default font size.
A simpler approach is usually to keep the root at its natural default and let tooling handle division. This avoids treating 10px as a guaranteed baseline and keeps token values aligned with common browser expectations.
A calculator can remove the mental-math burden without forcing a reduced root size on every visitor.
Document assumptions in design tokens
Store semantic intent alongside values. A token named --space-content communicates more than --space-24, and a short comment can record the reference context used during design handoff.
If a product intentionally changes the root at breakpoints, audit every rem-based length that should or should not scale. A root change affects typography, spacing, widths, and any other rem-based property at once.
- Keep the root assumption visible in conversion tools.
- Use semantic tokens instead of duplicating raw values.
- Test narrow screens, zoom, and long localized text.
- Round displayed values without discarding precision from source calculations.
Test computed values, not only source code
Use browser developer tools to inspect the computed font size on html and the final size on the target element. This reveals cascade rules, media queries, inheritance, and user-agent behavior that a static design file cannot show.
Then test browser zoom and increased text size. The goal is not a particular conversion number; it is a layout that remains readable and operable when the effective text size changes.
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