= Line height
The <line height> governs the vertical spacing allocated to a line of text. For a simple repeated run with fixed metrics, it sets the distance from one <text baseline> to the next. The gap between visible ink is a separate quantity, because different <glyphs> need not fill their allocated vertical region.
In an elementary single-<font> model, let $A$ be the positive <font ascent>, $D$ the positive magnitude of the <font descent>, and $G$ an added <font line gap>. Then
$$
\boxed{H=A+D+G.}
$$
For hypothetical metrics $A=800$, $D=200$ and $G=200$ <font units>, $H=1200$ <font units>. With 1000 <font units> per <em> and 20 <pixels per em>, the <text baselines> are 24 <pixels> apart. The <line height> can thus exceed the nominal <font size>.
\Image[/font-line-metrics.png]
{title=<Font ascent>, <font descent> and <font line gap> determine an elementary <line height>}
{description=Original schematic with ascent 800, descent magnitude 200 and extra gap 200 <font units>. At 1000 <font units> per <em> and 20 <pixels per em>, the baseline spacing is 24 <pixels>. Dashed boxes show font-wide metric extents; the original schematic ink occupies less space.}
<CSS> lays out inline content through line boxes. Its `line-height` participates in that calculation, and a block's declared value sets a minimum rather than guaranteeing that every mixed-content line has exactly that height. A taller inline object or a different alignment can enlarge a line box. The specification also describes how extra <typographic leading> is split above and below the chosen font metrics.<Visual formatting model details in CSS 2.2 by W3C>[Sections10.8–10.8.1: line-box construction, leading and the block-container minimum]{ref}
The useful distinction is between the nominal <font size>, the <font ascent> and <font descent> used for layout, and the actual ink <bounding boxes>. They answer different geometric questions even when they are expressed in the same units.
Back to article page
