The CSS `font-size` property sets an element’s text size. It can also control the scale of surrounding UI when padding and other dimensions use relative units. A useful approach is to set a page-wide size, then override it only where the design needs a different scale. section 2.2 section 2.3.1
Why two em values produce different sizes
Given `body { font-size: 16px; }` and `.slogan { font-size: 1.2em; padding: 1.2em; }`, the slogan’s font size is 16 × 1.2 = 19.2 px. The browser calculates that first. Padding then uses the slogan’s own font size, so it becomes 19.2 × 1.2 = 23.04 px. For a target font size in ems, divide the target pixel size by the inherited pixel size. section 2.2.1
Choose the scope of a font-size change deliberately:
- For one component, change its `font-size` and use ems for dimensions that should scale with its text. A 1em padding and border radius will follow the component’s size. section 2.2
- For a page-wide default, set `:root { font-size: 0.875em; }`. With a 16 px inherited browser default, that yields 14 px while remaining relative to user font settings. Descendants can inherit it; exceptions can use units such as rem. section 2.3.1
- Watch repeated nesting: `ul { font-size: 0.8em; }` makes each nested list 80% of its parent’s size. Use `ul ul { font-size: 1em; }` when deeper lists should stop shrinking. section 2.2.1
Listing 2.12 Responsive base font-size
:root { #1
font-size: 0.85em; #1
} #1
@media (min-width: 800px) { #2
:root { #2
font-size: 1em; #2
} #2
} #2
@media (min-width: 1200px) { #3
:root { #3
font-size: 1.15em; #3
} #3
} #3
A responsive root size starts at `0.85em`, then changes to `1em` at 800 px and `1.15em` at 1200 px. Components built with em and rem dimensions can scale without their own font-size media queries; dimensions fixed in pixels do not scale this way. section 2.3.2
