Em

The em is a typographic unit of measurement equal to the current font size. If an element's font size is 16px, then 1em equals 16px in that context. If the font size changes to 24px, 1em becomes 24px. This proportional relationship is what makes em units powerful — they scale automatically with the text they're associated with.

The name comes from the width of the uppercase letter 'M' in traditional metal type, which was historically the widest character and used as a reference square. In modern typography, the em is defined purely as a unit equal to the current font size, regardless of any actual letter dimensions.

/* em values scale with the inherited font-size */
.parent {
  font-size: 16px;
}

.child {
  font-size: 1.25em; /* 1.25 × 16px = 20px */
  padding: 1em; /* 1 × 20px = 20px — scales with THIS element's font-size */
  margin-bottom: 1.5em; /* 1.5 × 20px = 30px */
}

/* The key difference from rem (root em) */
html {
  font-size: 16px;
}

.card {
  font-size: 0.875rem; /* 14px — relative to root */
  padding: 1em; /* 14px — relative to this element's font-size */
  border-radius: 0.5rem; /* 8px — always relative to root */
}

/* Em units for letter-spacing are best practice */
h1 {
  font-size: 3rem;
  letter-spacing: -0.02em; /* -0.02 × 48px = -0.96px — scales correctly */
}

/* vs. pixel-based letter-spacing that breaks at different sizes */
h1.broken {
  letter-spacing: -1px; /* Fixed — won't scale if font-size changes */
}

Understanding the distinction between em and rem is critical. em is relative to the current element's font-size (or the nearest parent's font-size, when used for font-size itself). rem is always relative to the root element's font-size (html). This means em units can compound — a child inside a child can have a surprisingly small or large value — while rem values are always predictable.

For typography specifically, em units shine for letter-spacing, line-height, and spacing properties (padding, margin) that should scale proportionally with text. When you want consistent ratios that hold across type sizes, em is the right tool. Google Fonts documentation and most modern design systems document spacing in em values for exactly this reason.