cap
How tall the capital letters are in the current font.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 118+ |
| Chrome Android | 118+ |
| Edge | 118+ |
| Firefox | 97+ |
| Firefox Android | 97+ |
| Safari | 17.2+ |
| Safari iOS | 17.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.
| Unit | Measured | Share of the font size |
|---|---|---|
1em | ||
1ex | ||
1ch | ||
1cap | ||
1lh |
The same as a table
| Unit | Measures |
|---|---|
1em | The font size of the element. |
1ex | How tall the letter x is in this font. |
1ch | The width of the digit zero in the font. |
1cap | The height of a capital letter in the font. |
1lh | The 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.
Before
.btn svg {
block-size: 1em;
}After
.btn svg {
block-size: 1cap;
}