rlh
The line height set on the root element, shared by the whole page.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 111+ |
| Chrome Android | 111+ |
| Edge | 111+ |
| Firefox | 120+ |
| Firefox Android | 120+ |
| Safari | 16.4+ |
| Safari iOS | 16.4+ |
Formula 1rlh = used line-height of :root
How it works
1rlh is the line-height of the html element. With html { line-height: 1.5 } and the default 16px, 1rlh is 24px, and margins and paddings written in multiples of it land on one grid even in components whose text is larger or whose own line-height is tighter.
That is the difference from lh. A heading with line-height: 1.1 has a short 1lh, but spacing of 1rlh below it still equals a full line of body text. Vertical rhythm built on rlh stays regular across headings, captions and quotations that each set their own line height.
It follows the root’s line-height, so changing that one value on html moves every rlh on the page at once. It also follows the root’s font size when that line height is a number: with line-height: 1.5, a root of 24px made 1rlh 36px, and so did a reader’s default of 24px. A root line height written as a length, such as 24px, does not scale.
Try it
Measure the font-relative units
Pick a font and a size. The page measures 1em, 1ex, 1ch, 1cap and 1lh in that font, here, in your browser.
| Unit | Measured | Share of the font size |
|---|---|---|
1em | ||
1ex | ||
1ch | ||
1cap | ||
1lh |
The same as a table
| Unit | Measures |
|---|---|
1em | The font size of the element. |
1ex | How tall the letter x is in this font. |
1ch | The width of the digit zero in the font. |
1cap | The height of a capital letter in the font. |
1lh | The line height of the element. |
What changes it
- Moves with
- the reader's text size
- page zoom
- Stays put under
- the window size
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
Page-wide vertical rhythm: section spacing in whole lines of body text.
Watch out
It tracks the root's line height, so a component with bigger text will not get taller gaps from it. Good for page rhythm, wrong for spacing inside a component.
section {
padding-block: 2rlh;
}