ric
The width of the ideograph 水, taken from the font set on 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 1ric = the value of ic on the root element
How it works
1ric measures the same 水 advance as ic, but in the root’s font instead of the element’s own. It gives a CJK layout one character cell for the whole page: margins and columns counted in ric do not change when a block switches from a serif face to a sans-serif one.
It also settles what happens in elements whose font cannot draw ideographs. There ic falls back to that element’s own em, which varies with its font size, while ric keeps reading the root’s font. In a test with a root font whose 水 was 0.9em wide, a Latin-only element at 60px had 1ic of 60px and 1ric of 18px at a root size of 20px. A page with Latin captions inside Japanese text keeps its grid. If the root font has no 水 either, ric falls back to the root’s em.
Like the other root-font units, it ignores font-size changes made on a component and follows the root. Raising the reader’s default size scales every ric along with rem.
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 CJK grid that holds across components, including ones set in a Latin-only font.
Watch out
Like ic it needs a 水 glyph, here in the root font, and falls back to the root's 1em without one. Where the unit is unsupported the declaration is ignored, so write an em line before it.
.note {
max-inline-size: 40em;
max-inline-size: 40ric;
}