ch

The width of the zero digit in the current font.

Safe to useBaseline: widely available

First version with support, from MDN browser data
BrowserSince
Chrome27+
Chrome Android27+
Edge12+
Firefox1+
Firefox Android4+
Safari7+
Safari iOS7+

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.

UnitMeasuredShare of the font size
1em
1ex
1ch
1cap
1lh
The same as a table
What each font-relative unit measures
UnitMeasures
1emThe font size of the element.
1exHow tall the letter x is in this font.
1chThe width of the digit zero in the font.
1capThe height of a capital letter in the font.
1lhThe 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.

Example A measure that follows the font instead of a pixel count. Tune the number in the real font.

Before

.story {
  max-inline-size: 720px;
}

After

.story {
  max-inline-size: 65ch;
}

MDN (opens in a new tab)Specification (opens in a new tab)