Leading (typography)

Typographic leading concerns vertical spacing between lines of type. The term comes from the thin lead spacers used to separate lines of metal type. In current discussion, one must establish whether a quoted value means the complete spacing between text baselines or an additional allowance beyond the chosen font ascent and font descent.^[ref]

CSS leading uses the additional-allowance convention. If a single font contributes ascent $A$ and descent magnitude $D$, and the chosen line height is $H$, thenThe elementary inline-box construction allocates half of $L$ above the ascent and half below the descent. These quantities are font-wide metrics, rather than the actual ink bounding box of each glyph.^[ref]

For hypothetical metrics $A=11$, $D=3$ and $H=18$ CSS pixels, the extra leading is 4 CSS pixels, with 2 on each side. If the same metrics use $H=12$, then $L=-2$: the allocated line region is smaller than the metric extent. Negative CSS leading is allowed, so visible ink can extend outside its line allocation. A line height value must consequently be interpreted together with the font and the layout convention.

CSS leading is the extra allowance around the font ascent and font descent when CSS constructs the vertical extent associated with a glyph. Let $A$ be the positive ascent, $D$ the positive descent magnitude and $H$ the selected line height, all at the same font size and in the same units. The extra leading and the resulting extents above and below the text baseline areThe half-leading is a layout allocation. It need not be a visible blank strip, and $L$ may be negative.^[ref]

This explains a subtle effect of mixing fonts. In a simple baseline-aligned line containing only ordinary text CSS inline boxes, include the block's CSS strut among the contributions indexed by $i$. The CSS line box must extend far enough in each direction, givingThe two maxima can come from different contributions. Suppose one has $(A,D,H)=(11,3,18)$ CSS pixels, giving $(A^{\prime },D^{\prime })=(13,5)$, while another has $(8,4,20)$, giving $(12,8)$. If the CSS strut adds no larger extent, the resulting CSS line box is $13+8=21$ CSS pixels high, exceeding both declared line heights. The assumption of a common text baseline matters: other vertical alignments and inline objects require the fuller layout rules.^[ref]

Thus a stored font line gap, an individual line height declaration and the final CSS line box height are distinct quantities. Comparing only nominal font sizes cannot explain the mixed-font result.