rcap unit
The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.
Overview
The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.rcap | 118 | 118 | 147 | 17.2 | 118 | 17.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.icon {
width: 1rcap;
height: 1rcap;
}
.indicator {
margin-top: 0.5rcap;
}Live demo
Use cases
Formula-driven sizing
Use rcap unit to connect layout values to content, typography, or mathematical relationships.
Responsive calculations
Build CSS that scales with the environment rather than relying on repeated hard-coded numbers.
Cautions
- Advanced units and math improve clarity only when the relationship is easy to read later.
- Prefer simpler values when a formula adds more complexity than benefit.
Accessibility
- Relative sizing can improve zoom behavior when tested with real content and component states.
- Math-based CSS should still preserve readable spacing and avoid clipped content.
Related links
Powered by web-features