Cap Height

Cap height is measured from the baseline to the top of flat-topped capital letters like H, I, and E. Unlike ascender height, cap height excludes the overshoot that round letters like O require. When pairing a serif and sans-serif, aligning the cap heights rather than the baselines produces a more harmonious result because both typefaces share the same cap height reference. The cap height is listed in the font catalog details panel for each font.

The common mistake with most typographic terms is applying them without considering how they interact with other settings. Type is a system: changing kerning affects tracking, changing size affects leading, changing measure affects line-height. Test changes in context rather than in isolation.

Cap height is the height of flat-topped capitals from the baseline, and it is measured separately from the ascender height because caps do not reach the ascender line in most designs. Two fonts at the same nominal size can have noticeably different cap heights, which is why uppercase headlines set in one family and body text in another can feel misaligned even at the same pixel size.

CSS has no direct control over cap height, so you compensate with size. A common trick is to set display headlines in the smaller-capped font slightly larger so the caps visually match the body copy. When a design calls for all-caps labels next to an avatar or icon, pick a face whose caps match the height of that element: that detail is where a layout feels either engineered or accidental.