LLM Best Practices

em vs rem

2 min read

View markdown source

Overview

This page is the atomic definition. Full CSS guidance lives at css. em resolves relative to an element’s own (or inherited) font-size and compounds when nested; rem always resolves relative to the root font-size, making it the predictable, accessible default for most sizing.

Definition

Both em and rem are relative length units in CSS, but their reference points differ.

em resolves relative to the font-size of the element the property is applied to. For font-size itself, em resolves relative to the inherited font-size. This creates compounding: a child with font-size: 1.2em inside a parent with font-size: 1.2em inherits 1.44em of the root, not 1.2em. This compounding is usually an unintended bug.

rem resolves relative to the font-size of the root element (<html>). The default browser root font-size is 16px. 1rem is always 16px (or whatever the user has set) regardless of nesting depth. This makes rem predictable and accessible: users who increase their browser default font size get proportional scaling.

px is a fixed unit that ignores user font preferences. Avoid px for font sizes and for spacing that should scale with text. Use px for borders, box shadows, and other non-text measurements.

em is useful when sizing should scale with the component’s own text: padding: 0.5em on a button scales correctly when the button font-size changes, without needing separate padding overrides.

When it applies

Use rem for global typography, spacing scales, and container sizes. Use em for component-internal measurements that must scale proportionally with that component’s font-size (button padding, icon sizes inside labels). Avoid px for any measurement that benefits from user font-size scaling.

Set html { font-size: 100%; } (not a px value) to respect user browser preferences.

Example

html { font-size: 100%; } /* 16px by default */
h1 { font-size: 2rem; }   /* always 2 x root = 32px */
h2 { font-size: 1.5rem; } /* always 1.5 x root = 24px */
 
.btn {
  font-size: 0.875rem; /* 14px */
  padding: 0.5em 1em;  /* scales with button font-size */
}
  • box-model - em and rem measurements interact with box model dimensions.
  • custom-property - design tokens defined as rem values can be shared across components.
  • viewport - vw and vh are the viewport-relative counterparts to em/rem.
  • css - the CSS deep-dive.

Citing this term

See em vs rem (llmbestpractices.com/glossary/em-vs-rem).

Backlinks