ch
The width of the zero digit in the current font.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 27+ |
| Chrome Android | 27+ |
| Edge | 12+ |
| Firefox | 1+ |
| Firefox Android | 4+ |
| Safari | 7+ |
| Safari iOS | 7+ |
Formula 1ch = advance width of "0" in the element's font (0.5em if it cannot be measured)
How it works
1ch is the advance width of the digit zero in the font of the element it sits on. In a monospace font the letters share that width, so a line of 80 characters fits exactly in 80ch. In a proportional font most letters are narrower than a zero. In IBM Plex Sans, the font of this site, a box 65ch wide held about 87 characters of English prose on a line, and the default serif and sans-serif of Chromium on Linux held about 80, so max-inline-size: 65ch gives a line noticeably longer than 65 characters.
Two things follow from the definition. The width belongs to the font in use at that moment, so the value changes when a web font replaces its fallback, and a heading in a different family gets a different ch from the paragraph under it. And when a font has no zero to measure, the specification tells the browser to assume half an em, which Chromium does.
Use ch for the measure of text and tune the number in the real font, because it counts zeros and not letters. It also suits fields meant to hold a known number of digits: inline-size: 10ch on an input without padding held ten digits when the input used the same font. When boxes in different fonts must share one width, such as a code block under a paragraph, rch measures all of them in the root’s font instead.
One platform detail: on Linux, Chromium 156 rounds the advance of the zero to a whole pixel, so a zero 12.8px wide gives a ch of 13px and 10ch at 40px comes to 260px. On macOS the fraction is kept. The error is at most half a pixel per ch, so 80ch can be up to 40px off, and a layout built on ch is worth checking on both systems.
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
The measure of a text column, and inputs for a known number of digits.
Watch out
In IBM Plex Sans, the font of this site, a line 65ch wide held about 87 characters of English prose: zeros are wider than most letters. The number to write depends on the font, and changes when the font does.
Before
.story {
max-inline-size: 720px;
}After
.story {
max-inline-size: 65ch;
}