Newly available Useful when rcap unit expresses sizing or math relationships more clearly than fixed literals.

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.

Units and functions

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

iconsize

CSS iconsize demo.

PreviewFullscreen

indicator

CSS indicator demo.

PreviewFullscreen

marginadjust

CSS marginadjust demo.

PreviewFullscreen

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