A `rem` (“root em”) is a CSS length measured against the root element’s computed font size. Unlike an `em`, it does not change meaning when you move a rule into a differently sized component. If the root font size is 16px, `0.8rem` computes to 12.8px wherever it appears—even in nested lists. section 2.2.2
Set a usable base size
Suppose the browser’s default is 16px and the page should start at 14px. Set `:root { font-size: 0.875em; }`. The page inherits that size, while `1rem` now follows the root’s computed size. Setting the root with `em` also respects changes to the user’s default font setting. A heading can then use `font-size: 0.8rem` without depending on its parent’s font size. section 2.3.1
Avoid shrinking the root to `0.625em` merely to make `1rem` equal 10px under a 16px default. That leaves ordinary text too small and invites repeated overrides. Choose a sensible base, then adjust relative values by how they look rather than converting every declaration back to pixels. section 2.3
Listing 2.13 Creating a larger version of the panel
.panel {
font-size: 1rem; #1
padding: 1em;
border: 1px solid #999;
border-radius: 0.5em;
}
.panel > h2 {
margin-top: 0;
font-size: 0.8em; #2
font-weight: bold;
text-transform: uppercase;
}
The panel uses `1rem` to establish its own predictable font size. Its `em`-sized heading, padding, and radius can then scale together when that panel’s font size changes. section 2.3.3
That distinction gives you two useful controls. Change the root font size at media-query breakpoints to scale rem- and em-based measurements across the page without rewriting each component. Or change one panel’s font size from `1rem` to `1.2rem` to enlarge that panel; use `rem` instead of `em` for any internal measurement you want to keep tied to the root. section 2.3.2 section 2.3.3
Choose units by what should move together. `rem` is a practical default for predictable font sizes; `em` suits spacing that should track a component’s own text, while pixels can suit a fine border or a gap that need not scale. If reducing a navigation link’s font size would also shrink its `em` padding, switching that padding to `rem` keeps it tied to the root instead. section 2.2.2 section 12.6.2
