Relative CSS Units: rem vs. em

Why it exists

Hardcoding UI dimensions with absolute units like pixels (px) creates rigid designs. When a user increases their browser's default font size for accessibility, a pixel-based layout doesn't adapt, leading to broken UIs and poor readability. Relative units were created to build fluid layouts that respect user preferences.

The mental model

Think of rem as a global sizing variable and em as a local one. rem (root em) bases its size on one single source of truth: the root <html> element's font size. em bases its size on its immediate parent's font size. This makes rem predictable and em contextual.

How it works

The browser calculates the final pixel value of a relative unit. For rem, it multiplies the value by the root element's font size (e.g., 2rem with a 16px root font becomes 32px). For em, it multiplies the value by the computed font size of the element's direct parent. If that parent also uses em, the calculation compounds. For example, a child with font-size: 0.8em inside a parent with font-size: 0.8em will have a final font size of 0.64 times its grandparent's font size.

When to use it

Use rem for most of your sizing needs: global typography, margins, padding, and layout dimensions. This ensures consistency and simplifies maintenance. Use em sparingly for properties on a component that should scale relative to that component's own font size, such as the padding on a button or the size of an icon next to text.

When not to use it

Avoid using em for spacing and layout in deeply nested components. The compounding effect makes sizes difficult to predict and debug. If you find yourself calculating 1 / 1.2 * 0.8 to figure out a font size, you should probably be using rem instead. For elements that must be a fixed size, like a 1px border, px is still the correct choice.

One canonical example

Assume the browser default font-size is 16px. If you set div { font-size: 1.25rem; }, that div's font size becomes 20px (1.25 16). If a inside that div has font-size: 0.8em, its font size will be 16px (0.8 20). If that same instead had font-size: 0.8rem, its font size would be 12.8px (0.8 * 16), ignoring its parent's size completely.