cap

How tall the capital letters are in the current font.

Safe to useBaseline: widely available

First version with support, from MDN browser data
BrowserSince
Chrome118+
Chrome Android118+
Edge118+
Firefox97+
Firefox Android97+
Safari17.2+
Safari iOS17.2+

Formula 1cap = cap height of the element's font (the ascent of the font if it cannot be determined, as the specification has it)

How it works

1cap is the cap height of the font the element uses: the distance from the baseline to the top of a flat capital such as H or E. Use it to line things up with capitals. An icon next to a heading with block-size: 1cap is as tall as the capital letters beside it, and the box behind a drop cap can take the height of the letter.

Compare it with ex, which follows lowercase. A mark sized in cap rises above the lowercase letters and stops where the capitals stop. In IBM Plex Sans a capital is about 0.7em tall, so 1cap is roughly 1.35 times its ex here.

The browser takes the cap height from the font’s OS/2 table. The specification says the ascent of the font stands in when the height cannot be determined, and lets a browser estimate it from a capital glyph first. On Linux, Chromium 156 does both: 0.69em from an H glyph that tall, and the ascent for a font with no H glyph. On macOS it does neither: it gave 0.345em for the same H glyph, and 0.711em for a font with no H glyph and an ascent of 0.8em. A font that declares its cap height is not affected. Write cap where the eye measures against the capitals: a vertical rule between two words in small caps, or a box drawn around an all-caps label.

Try it

Measure the font-relative units

Pick a font and a size. The page measures 1em, 1ex, 1ch, 1cap and 1lh in that font, here, in your browser.

UnitMeasuredShare of the font size
1em
1ex
1ch
1cap
1lh
The same as a table
What each font-relative unit measures
UnitMeasures
1emThe font size of the element.
1exHow tall the letter x is in this font.
1chThe width of the digit zero in the font.
1capThe height of a capital letter in the font.
1lhThe line height of the element.

What changes it

Moves with
  • the reader's text size
  • page zoom
  • the font in use
Stays put under
  • the window size
  • the query container
  • phone toolbars
  • the writing mode

Reach for it when

An icon or box that should be exactly as tall as the capitals of its label.

Watch out

Cap height belongs to the font, so changing the font changes every cap value. A browser without the unit drops the declaration, so give the property a fallback line before the cap one.

Example 1em overshoots the capitals by the ascender room; 1cap stops where they stop.

Before

.btn svg {
  block-size: 1em;
}

After

.btn svg {
  block-size: 1cap;
}

MDN (opens in a new tab)Specification (opens in a new tab)