rcap
Capital-letter height as the root element's font draws it.
Use with a fallbackBaseline: newly available since January 2026
| Browser | Since |
|---|---|
| Chrome | 118+ |
| Chrome Android | 118+ |
| Edge | 118+ |
| Firefox | 147+ |
| Firefox Android | 147+ |
| Safari | 17.2+ |
| Safari iOS | 17.2+ |
Formula 1rcap = the value of cap on the root element
How it works
1rcap is the cap height in the root’s font. Where cap follows the font of the element it sits on, rcap reads the root, so a row of icons and labels built from components in different families still gets icons of one height.
Use it for a page-wide icon scale tied to capital letters. block-size: 1rcap on every icon makes them all as tall as a capital in the page’s main font, whether the label next to each is set in a text face or a display face with taller capitals.
It is the root-font twin of cap, as rex is of ex, and like them it needs a look at the Baseline badge before use. Without support the declaration is dropped, so a fallback such as 1.4em on the line before it costs one line.
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
One icon height for the whole page, tied to the capitals of the main font.
Watch out
rcap reads the font of the root, so a component set in another font still gets the capital height of the page, not its own. Where the unit is missing the declaration is dropped, so put a rem line before it.
.logo {
block-size: 1.5rem;
block-size: 2rcap;
}