Understanding the CSS Root Font Size (Base Size)
Learn how the root font size (html font-size) controls all rem calculations. Explore the 62.5% trick, custom bases, and how browser settings interact with your CSS.
Detailed Explanation
The Root Font Size and rem
Every rem value in your stylesheet is relative to one thing: the computed font size of the <html> element. Change the root and every rem in the document changes proportionally.
Browser Default: 16px
All major browsers default to font-size: 16px on the <html> element. Unless you or the user override it, this is the base for all rem calculations.
The 62.5% Trick
A popular technique sets:
html {
font-size: 62.5%; /* 62.5% of 16px = 10px */
}
body {
font-size: 1.6rem; /* restore to 16px for body text */
}
Now 1rem = 10px, making mental arithmetic much easier:
| Desired px | rem value |
|---|---|
| 12 | 1.2rem |
| 14 | 1.4rem |
| 16 | 1.6rem |
| 20 | 2rem |
| 24 | 2.4rem |
Accessibility Implications
When you set html { font-size: 62.5%; }, a user who has changed their browser default to 20px will get a computed root of 20 * 0.625 = 12.5px, so their preference is still respected proportionally. However, using html { font-size: 10px; } (an absolute value) overrides the user's preference entirely, which is an accessibility anti-pattern.
Custom Base Sizes
Some design systems use other bases:
- html { font-size: 8px; } — 8-point grid alignment (not recommended for accessibility)
- html { font-size: 100%; } — Explicit 16px baseline
- html { font-size: 112.5%; } — 18px base for larger default text
How Our Converter Handles This
The DevToolbox px-rem converter includes a "Base font size" input. Changing it from 16 to any other value instantly recalculates all conversions, so you can match your project's root font size exactly.
Use Case
A team setting up a new design system needs to decide on a root font size strategy and understand how it affects every spacing, typography, and layout value throughout the project.