Baseline

Almost every vertical measurement in type is a distance from this line. X-height is the baseline to the top of the lowercase, cap height the baseline to the top of the capitals, ascent and descent the room the face claims above and below it. Two things deliberately break the rule. Descenders on p, g, y and j hang below it, and round letters like o and e overshoot it by a hair in both directions, because a curve that stopped exactly on the line would look as though it were floating.

The reason it matters in interface work is that the baseline, not the box, is what the eye uses to judge whether two pieces of text are on the same line. Set a 32px number beside a 13px label and centre their boxes and they will look wrong, because their baselines sit a few pixels apart. Align them on the baseline and they read as one line even though the boxes are wildly different heights. This is the single most common vertical alignment mistake in a design system, and it shows up most in stat blocks, currency amounts with a small unit, and any label that carries a number.

CSS gives you the line directly. vertical-align: baseline is the default for inline content, which is why a mixed size sentence already lines up, and align-items: baseline (with first baseline and last baseline for a multi-line box) brings the same alignment to flex and grid. The catch is icons: an inline SVG is a replaced element whose baseline is its bottom margin edge, so it sits on the line rather than optically centred on the lowercase, and it needs nudging up by a fraction of the x-height to look right. The ex unit is the honest way to write that nudge, since it tracks the face rather than a number you guessed once.

Print designers go further and set type on a baseline grid, a fixed rhythm every line of every column lands on, so facing pages agree. The web equivalent is harder than it looks, because a browser positions a line box by its height rather than by its baseline, and half-leading splits the difference above and below the text. Layouts that manage it usually fix the leading to one rhythm and pay for it with the flexibility they lose everywhere else, which is why most design systems settle for consistent leading instead of a true grid.