Newly availableUseful when rlh unit expresses sizing or math relationships more clearly than fixed literals.
Units and functions Newly available

rlh unit

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

Units and functions

Overview

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

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

Powered by web-features