Cap height

How tall the capital letters stand above the baseline: the measurement you align to when text has to line up with icons or a logo.

how tall are the capitalsthe caps look too bigcapheightwhy does my all caps heading look smallheight of the capital letterswhy won't my icon line up with the textaligning a logo with a wordcapital letters are shorter than the font size

See it

Live demo coming soon

What it is

Cap height is the distance from the baseline to the top of a flat-topped capital: H, E, T, I. Round caps like O and S and pointed ones like A are drawn slightly taller (overshoot) so they look the same height rather than measure it. In most typefaces cap height lands around 0.70em, which is why a 16px label is nowhere near 16px of visible ink.

It matters whenever type has to line up with something that is not type. Match an icon's optical size to the cap height, not the font size. Center a button label on its cap-height box, not its line box. Align a wordmark to a rule or a photo edge by the caps. Designers who eyeball this get it right; developers who center the line box get labels that sit a pixel or two low, every time.

Two things that catch people. Caps are shorter than ascenders in most typefaces, so a lowercase 'h' pokes above a capital 'H' and an all-caps heading feels smaller than a sentence-case one at the same size. And CSS is only recently able to talk about this directly: the cap unit sizes things to cap height, and text-box-trim with text-box-edge: cap alphabetic crops the line box down to the cap and the baseline. Check support before you rely on either.

Ask AI for it

Align these icon-and-label pairs by cap height instead of font size. For each pair, size the icon's visual body to match the label's cap height (roughly 0.70 of the font size for most sans-serifs, so a 16px label takes an 11px to 12px icon body), then vertically center the icon on the cap-height box rather than the line box: use text-box-trim with text-box-edge: cap alphabetic, or a flex row with the icon nudged by the half-leading. Show a before and after with the baseline and cap line drawn as guides at 200 percent zoom.

You might have meant

x heightascender descenderbaselinesmall capsvertical rhythm

Go deeper