em vs rem units

The one-line difference

1rem equals the font size you set on the root element (html), usually 16px. 1em equals the computed font size of the current element. Because font size is inherited, the same property can resolve to a different value at different depths of the tree.

html { font-size: 16px;           /* so 1rem = 16px */ }
main { font-size: 1.25rem;        /* 20px */ }
main p { font-size: 1em;          /* 20px, size of main */ }
main p span { font-size: 2em; }   /* 40px, size of main p */

Each em multiplies the size of its own element. In the example above the span size is 40px, not 32px, because the span inherits font size 20px and 2em of that is 40px. Understand that before using em for anything whose dimension depends on the parent, then use it intentionally.

Where em is the right tool

• Vertical rhythm and components. margin: 0 0 1.5em and padding: 0.8em 1em scale with the component's font size, so a button scales as a unit when its text size changes.
• Anything tied to the current element's typography, like padding that hugs the text or a unitless multiplier such as line-height: 1.6 (unitless line-height already resolves against the element's own font size, which is the same intent as em).
• Media queries and breakpoints, where em is the modern norm. In a @media declaration, 1em equals the root font size (usually 16px) rather than the element's own size, and em beats px for respecting the browser's zoom and text-size settings.

The trap: a nested tree of em values multiplies. If a list is 0.9em inside 0.9em inside 0.9em, the text is smaller at every layer. Spacing and font size that look right in one component can be startlingly large or small one level down.

Where rem is the right tool

Font sizes on page content: you want one place to change the whole scale, and that is the root. font-size: 1.25rem on a heading is predictable no matter where it lives. Spacing that must stay comparable outside the component, grid gaps, page gutters, and wrappers are also natural rem targets, because they are page-level, not element-level.

Do not set the root to an arbitrary small value thinking it "scales the design". A root size other than the browser default makes every rem suit your choice, including small text. If you must adjust text-size behaviour, prefer html { font-size: 100%; } and rem sizes that follow the browser's zoom and "minimum font size" settings, or keep the browser default (usually 16px) and design around rem multiples of it.

A working mix

The common clean baseline:

:root { font-size: 100%; }          /* honors browser defaults */
body { font-size: 1rem; }
h1 { font-size: 1.8rem; }
p  { font-size: 1rem; }
.button { font-size: 1rem; padding: 0.5em 1em; }

Type on the page uses rem (root-driven). Internal proportions use em (component-driven). The mistakes that drift the design include mixing px line-heights into a component and setting em on a heading's font-size for a compounding "twice the parent" effect. Keep font-size mostly in rem, component internals in em, and verify against the zoomed and large-text case, not just the design at the machine's default size.

The related articles cover the breakpoint layer and the box model interaction with that choice.