CSS offers multiple units for defining font sizes, broadly categorized into absolute and relative measurements. The pixel (px) is an absolute unit, meaning a font set to 16px will render at exactly that calculated size regardless of the parent element's styling. While px provides pixel-perfect precision and predictability, it is generally discouraged for typography because it overrides the user's default browser font size settings, harming accessibility.
Most modern web browsers default to a base font size of 16px. Users with visual impairments often increase this base size in their browser settings (e.g., to 24px) to make reading easier. If your CSS explicitly sets font-size: 16px, it forces the text back to 16px, breaking the user's accessibility preferences. Relative units resolve this conflict.
The compounding problem of em units
The 'em' unit is relative to the font size of its direct parent element. If a parent container has a font size of 20px, setting a child's font size to 1.5em means the child will render at 30px (20px × 1.5). This allows modules to scale proportionally based on their container, which is useful for localized sizing like padding or margins on buttons.
However, using em for font sizes often leads to the compounding problem in nested layouts. If you define list items to be 0.8em, a nested list inside an existing list will render at 0.64em (0.8 × 0.8), becoming progressively and unpredictably smaller. This cascading effect makes maintaining large stylesheets exceedingly difficult.
Why rem is the modern typography standard
The 'rem' (root em) unit solves the compounding issue by tying the measurement exclusively to the root element (the <html> tag), rather than the immediate parent. If the root font size is the browser default of 16px, setting any element to 2rem guarantees it will render at 32px, no matter how deeply nested the element is in the DOM tree.
By relying on rem, developers ensure that their layouts are completely scalable. When a user changes their base browser font size, the root font size inherits that change, and all rem-based typography scales proportionally. This approach perfectly balances layout consistency for the developer with robust accessibility control for the user.