The em unit expresses a CSS length relative to the current element’s computed font size. For font-size itself, nested em values multiply through the inheritance chain, so the browser converts each result to pixels before rendering. section 3.1.1 section 3.4.4
Calculate a nested em value by multiplying the base size by every inherited multiplier:
- computed size = base size × multiplier₁ × multiplier₂ × … × multiplierₙ section 3.1.2
- Deep nesting can produce unexpectedly large or small text because each font-size multiplier compounds with the previous result. section 3.4.4
Nested headings
With a 16px root, main at 1.25em becomes 20px. A direct h2 at 2em becomes 40px, while an article at 1.75em makes its nested h2 70px. Replacing h2’s value with 2rem makes both headings 32px because rem references the root. section 3.4.5
