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

rch unit

The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.

Units and functions

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.rch
111
111
147
17.2
111
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.input-field {
  width: 30rch;
}
.sidebar {
  max-width: 40rch;
}

Live demo

Inputfieldwidth

CSS Inputfieldwidth demo.

PreviewFullscreen

sidebarwidth

CSS sidebarwidth demo.

PreviewFullscreen

Textcontainer

CSS Textcontainer demo.

PreviewFullscreen

Use cases

  • Formula-driven sizing

    Use rch 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