Leading

Leading (pronounced "ledding") refers to the vertical distance between the baselines of successive lines of text. The term comes from the physical strips of lead that typographers inserted between rows of movable type to add vertical space. In CSS, leading is controlled primarily by the line-height property.

The baseline-to-baseline measurement is what matters for leading — not the space between the bottom of descenders and the top of ascenders on the next line (that's called the slug), but the consistent rhythm from one baseline to the next. This consistency is what creates the vertical cadence that makes text feel organized and comfortable to read.

/* line-height controls leading in CSS */

/* Unitless values are recommended — they scale with inherited font-size */
body {
  font-size: 1rem;
  line-height: 1.6; /* 1.6 × 16px = 25.6px leading */
}

/* Headlines need tighter leading */
h1 {
  font-size: 3rem;
  line-height: 1.1; /* Large text with normal leading feels airy and disconnected */
}

h2 {
  font-size: 1.75rem;
  line-height: 1.25;
}

/* Long-form reading benefits from generous leading */
.article-body {
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 65ch; /* Leading and measure work together */
}

/* Small, dense UI text */
.data-table td {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Avoid unit-based values that don't scale properly */
.problematic {
  line-height: 24px; /* Breaks when font-size changes */
}

The optimal leading for body text typically falls between 1.4 and 1.8 of the font size, with 1.5–1.6 being the most common recommendation for general reading. The right value depends on line length (longer lines need more leading), typeface (tall x-height typefaces need more leading), and context (dense data tables can tolerate tighter leading than editorial articles).

Leading and line length are deeply interdependent — they create a grid that the eye navigates when reading. When lines are long, the eye needs more vertical contrast between lines to track back to the left margin correctly. When lines are short (as in newspaper columns), tighter leading maintains visual coherence. Typefaces like Merriweather and Lora are designed with tall x-heights that require slightly more generous leading than average.