Cap Height

The cap-height is the distance from the baseline to the top of a flat capital letter — typically measured on letters like 'H', 'I', or 'E' where the top stroke is perfectly horizontal. It's a primary metric in type design and one of the key factors in how large or small a font appears at a given font-size.

Unlike ascenders (which are often taller), the cap-height provides the consistent visual ceiling for uppercase text. Two fonts set at the same font-size in CSS can look dramatically different in perceived size depending on their cap-height.

/* These both render at the same font-size, but appear very different in scale */
.heading-playfair {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  /* Playfair has a moderate cap-height; letters feel elegant and measured */
}

.heading-bebas {
  font-family: 'Bebas Neue', cursive;
  font-size: 48px;
  /* Bebas Neue has a very tall cap-height; fills the em square aggressively */
}

The ratio of cap-height to x-height is a defining characteristic of a typeface's personality. A large x-height relative to cap-height (like Inter or Roboto) creates a democratic, legible feel — lowercase text is substantial and carries weight. A smaller x-height relative to cap-height (like classical Garamond) gives uppercase letters more visual authority and creates more dramatic contrast between upper and lowercase.

For web developers, cap-height matters most in two contexts. First, when sizing text in small caps (font-variant: small-caps or font-variant-caps: small-caps), small caps are typically designed to match the cap-height of the regular weight. Second, when aligning text with icons or images, optical alignment to cap-height often looks better than mathematical centering, because the ascenders above make text appear lower than it geometrically is.

CSS's new cap unit (from the CSS Values Level 4 spec) is equal to the cap-height of the current font — allowing you to size elements proportionally to uppercase letter height, though browser support is still catching up.