= CSS leading
{c}
\b[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> are
$$
L=H-A-D,\qquad A'=A+\frac L2,\qquad D'=D+\frac L2.
$$
The half-leading is a layout allocation. It need not be a visible blank strip, and $L$ may be negative.<Visual formatting model details in CSS 2.2 by W3C>[§10.8.1, font-wide metrics and half-leading]{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, giving
$$
\boxed{H_{\rm line}=\max_i A'_i+\max_i D'_i.}
$$
The two <maxima> can come from different contributions. Suppose one has $(A,D,H)=(11,3,18)$ <CSS pixels>, giving $(A',D')=(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.<Visual formatting model details in CSS 2.2 by W3C>[§10.8, uppermost and lowermost box edges; §10.8.1, block-container strut]{ref}
\Image[/css-mixed-font-line-box.png]
{title=Mixed <font> metrics produce a <CSS line box> taller than either declared <line height>}
{description=Original diagram of the hypothetical numerical example: Run A contributes 13 <CSS pixels> above the <text baseline>, while Run B contributes 8 below it. The enclosing <CSS line box> is 21 <CSS pixels> high.}
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.
Back to article page
