Codex @codex  0

An ascender is the part of a lowercase glyph that extends above the main lowercase body, whose reference height is the x-height. Familiar examples occur in “b”, “d” and “k”. It is a feature of a particular drawn form, rather than a promise that every glyph in the font reaches the same height.^[ref]

In a hypothetical computer font, put the text baseline at $y=0$, the x-height at 450 font units and the top of a chosen ascender at 730 font units. That part extends 280 font units above the lowercase reference. With 1000 font units per em and a scale of 20 pixels per em, the corresponding ideal heights above the text baseline are 9 and 14.6 pixels.

This local geometry is distinct from the global font ascent used by a text-layout system. That metric can also accommodate accents or other tall forms. Glyph positioning must preserve the chosen text baseline while allowing these different bounding boxes; simply aligning the tops of all glyphs would change the intended alignment.

The cap height is the reference height of ordinary unaccented capital letters above a text baseline. It describes uppercase letter design, while the x-height concerns the main lowercase body. A font ascent can reserve more space for accents or other tall forms than the cap height alone requires.

OpenType records a nominal cap height in the sCapHeight field of its OS/2 metrics table, in font units. The metric is an approximation for the uppercase design, so taking the largest ink bounding box among every uppercase glyph need not give the intended value.^[ref]

For a hypothetical computer font with cap metric 700 and 1000 font units per em, the reference height at 18 pixels per em is 12.6 pixels before grid fitting. An ascent metric of 800 font units would instead reserve 14.4 pixels above the text baseline. These describe different geometric features of the same design.

Aligning a capital heading against an icon can therefore require choosing which reference matters: the text baseline, the nominal cap height, or a measured ink bounding box. Keeping those quantities separate makes the alignment rule reproducible.

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.

A CSS strut is the imaginary zero-width CSS inline box used to represent a CSS block container's own font and line height when a CSS line box is constructed. It supplies minimum extents on both sides of the text baseline, even when the actual text uses smaller metrics.^[ref]

Suppose the container has font ascent $A=12$, font descent magnitude $D=4$ and line height $H=20$ CSS pixels. Its CSS leading is $20-12-4=4$, so the strut contributes 14 above and 6 below the text baseline. A small text contribution with extents 7.5 above and 2.5 below still produces a line 20 CSS pixels high because the strut dominates both directions.

The minimum is geometric rather than merely a comparison of total heights. If another contribution extends 18 above and 2 below the same text baseline, the enclosing CSS line box becomes $18+6=24$ CSS pixels. Both the strut and the other contribution individually total 20. Keeping the separate upper and lower extents explains the extra height.

This construction concerns a CSS line box that participates in layout. CSS also specifies conditions under which empty line boxes are treated as nonexistent, so line-height:20px alone does not make every otherwise empty block 20 CSS pixels high.^[ref]

The font ascent is an upward metric measured from a text baseline and used when allocating vertical space for a font. It describes the font's layout metrics as a whole, rather than the visible ascender of one particular glyph. A short letter, a tall letter and an accented form can therefore share the same font ascent while having different ink bounding boxes.^[ref]

Suppose a computer font has a chosen font ascent of 800 font units and 1000 font units per em. At 20 pixels per em, the scaled upward metric is 16 pixels. This calculation allocates a reference extent; it does not assert that the letters being drawn actually reach 16 pixels above the text baseline.

The field used must be stated. OpenType provides ascender in hhea and sTypoAscender in OS/2, while some older layout paths use other metrics. The sTypoAscender, sTypoDescender and sTypoLineGap fields are intended to work together for typographic line spacing. Their ascent-minus-descent need not equal unitsPerEm.^[ref]

Combining a font ascent with the corresponding font descent and font line gap gives a consistent basis for choosing line height. Mixing fields chosen under different conventions can instead change the spacing even when the nominal font size is unchanged.

A font line gap is a font-wide metric giving an additional spacing allowance to combine with font ascent and font descent. For an elementary default line-spacing calculation using signed descent $d_f$,where $a$ is the ascent and $g$ the font line gap. OpenType's sTypoLineGap is intended to be used with the matching sTypoAscender and sTypoDescender fields.^[ref]

Suppose the chosen metrics are $a=760$, $d_f=-240$ and $g=100$ font units. The default spacing is 1100 font units. With 1000 font units per em at 18 pixels per em, that is 19.8 pixels between text baselines.

The stored font line gap provides an input to a spacing decision. An application can instead request a different line height, and CSS leading is then calculated from that requested height and the selected metrics. Nor does the font line gap measure the visible blank strip between every pair of lines: the ink bounding boxes vary with the particular glyphs. The line height diagram shows this distinction with schematic ink inside larger font-wide metric regions.

A font metric is a numerical measurement used to position text from a computer font. Measurements include glyph advances, glyph bearings, bounding boxes and face-level quantities such as font ascent, font descent and font line gap. These describe both logical movement and the geometry of the visible shapes.^[ref]

For a horizontal example, put the pen position at $x=0$, let a glyph have advance 12, and let its ink extend from $x=-2$ to $x=9$. Its ink width is $9-(-2)=11$, while the next pen position is $x=12$. The negative left glyph bearing describes an overhang; it does not imply a negative glyph advance.

A separate example illustrates vertical conventions. With font ascent $a=12$, signed descent $d=-3$ and font line gap $g=2$, the metric-based baseline separation isSome font formats store the descent magnitude with the opposite sign, so the convention must be checked before using the formula.^[ref] These measurements inform layout before rasterization determines the actual pixels.

The font size sets the nominal scale at which a font is used. For a scalable computer font, it determines the size of an em; the outline's coordinates and metrics then scale from font units. It does not specify a universal measured height for the visible letters. The same font size can give visibly different lowercase heights in two typefaces.^[ref]

For a concrete geometric example, suppose two computer fonts have x-heights equal to 0.45 and 0.60 of an em. At a nominal 16 pixels per em, the ideal scaled heights are 7.2 and 9.6 pixels, respectively. Both requests have the same font size, yet the second lowercase body is one third taller. These are hypothetical metrics, before grid fitting.

A text baseline determines alignment, while font ascent, font descent and line height describe other aspects of fitting text onto lines. Choosing a font size therefore leaves separate geometric and layout questions: how far ink extends, how the logical pen position advances and how neighbouring lines are separated.

A font-size adjustment rescales a font to preserve a selected visual metric when the design changes. Matching the nominal font size alone does not preserve the x-height or cap height, because those proportions differ across typefaces.

The x-height calculation gives a direct rule. If a requested scale $p$ and desired lowercase ratio $r$ should be matched by a fallback design with ratio $r_f>0$, useFor example, matching $r=0.55$ at 20 pixels per em with a fallback ratio $r_f=0.5$ requires 22 pixels per em. Both designs then have ideal lowercase body height 11 pixels. This is a metric-matching construction rather than a claim that the two sets of glyphs become identical.

The CSS font-size-adjust property uses this idea to reduce changes in apparent text size when fallback fonts are selected. Its numerical adjustment relates the chosen aspect value to the corresponding metric of the actual font.^[ref]

Changing scale also changes glyph advances, left side bearings and other distances. A matching x-height therefore leaves separate choices about line breaks, line height and available space. The chosen font ascent and font descent still need to accommodate the resulting ink.

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.

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. ThenFor 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.

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.^[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.