LLM Best Practices

em vs rem

2 min read

View markdown source

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).

Graph View

Backlinks