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

rlh unit

The rlh CSS length unit is a font-relative length relative to the line height of root element.

Units and functions

Browser support

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

Syntax

CSS 
html {
  line-height: 1.5;
}
.paragraph {
  margin-bottom: 1rlh;
}
.section {
  padding: 2rlh;
}

Live demo

1rlhmargin

CSS 1rlhmargin demo.

PreviewFullscreen

2rlhpadding

CSS 2rlhpadding demo.

PreviewFullscreen

heightspecified

CSS heightspecified demo.

PreviewFullscreen

Use cases

  • Formula-driven sizing

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