rch
The zero-digit width, measured in the font of the root element.
Use with a fallbackBaseline: newly available since January 2026
| Browser | Since |
|---|---|
| Chrome | 111+ |
| Chrome Android | 111+ |
| Edge | 111+ |
| Firefox | 147+ |
| Firefox Android | 147+ |
| Safari | 17.2+ |
| Safari iOS | 17.2+ |
Formula 1rch = the value of ch on the root element
How it works
1rch is ch measured in the root’s font: the width of a zero as html sets it, ignoring the font of the element the value sits on. It is the ch of the page, the same number in a heading, a caption and a pre block, and it exists so that a design can take its measure from one place.
Put a code sample in a monospace font under body copy. Writing max-inline-size: 70ch on both gives two different widths whenever the two fonts, or the two font sizes, have zeros of different width. Writing 70rch on both gives one width, and the edges line up.
Because it belongs to the root, rch ignores the font a component picks for itself and follows the root’s font family and size. Support arrived later than for ch, so look at the Baseline badge above before using it without a fallback.
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
- the font in use
- Stays put under
- the window size
- the query container
- phone toolbars
- the writing mode
Reach for it when
A line length that must stay the same when a component switches to another font family.
Watch out
In a heading set larger than the body, 60rch is narrower than 60ch by exactly the ratio of the two font sizes, because rch still counts the body's zero. Browsers without rch drop the declaration, so write the ch line first.
.story {
max-inline-size: 65ch;
}
@supports (width: 1rch) {
.story { max-inline-size: 65rch; }
}