In CSS, what does the `ch` unit measure, and why is `max-width: 65ch` a common way to limit line length?

## What ch is defined as `ch` is one of the font-relative length units in CSS. `1ch` equals the **advance measure of the `0` (U+0030 DIGIT ZERO) glyph** in the element's computed font — that is, how far the text cursor moves after rendering a zero, which includes the glyph's side bearings, not just the ink. If that measure cannot be determined — the font has no zero glyph, or the font is unavailable — the spec defines a fallback: `1ch` is `0.5em` in a horizontal writing mode. Because the reference is the element's *own* font at its *own* size, `ch` inherits two useful behaviours: change the font-family and the unit re-measures; change the font-size (or the user changes theirs) and the unit scales with it. ## Why it is used for line length Typographic guidance for body text is stated in characters per line — commonly somewhere around 45 to 75 — because eye movement and line-return accuracy degrade on very long lines. CSS has no "characters" unit, but `ch` is the closest available proxy: ```css .prose { max-width: 65ch; } ``` The advantage over `max-width: 700px` is that the constraint is expressed in the terms the rule is actually about. Swap the font, bump the font-size, or let a user enlarge their default text, and the column re-measures to keep roughly the same number of characters per line. A px cap silently becomes too many characters per line at small text and too few at large text. ## The caveat: ch is not a character count In a proportional (non-monospaced) font, characters have different widths, and digits are typically drawn on a wider, tabular-ish advance than average lowercase letters. So `65ch` of running prose usually fits **more** than 65 characters per line — the column is a bit wider than the naive reading suggests. Treat the number as a tuning knob you adjust by eye, not a literal count. In a monospaced font every glyph shares one advance width, so there `Nch` genuinely is N characters. That makes `ch` especially precise for code blocks, terminal-style layouts, and fixed-column alignment. ## ex, and the family it belongs to `ex` is the other classic font-relative unit: `1ex` is the **x-height** of the element's font — the height of a lowercase `x`, i.e. the body of the letters excluding ascenders and descenders. Its fallback when unmeasurable is also `0.5em`. `ex` is a vertical measure and is used for optical alignment of inline decorations: nudging an inline icon or a superscript so it lines up with the visual centre of the text rather than with the baseline or the full em box. ```css .inline-icon { width: 1em; height: 1ex; /* aligns to the body of the text, not the em box */ } ``` Both sit alongside `em` and `rem` in the font-relative family. The distinction: `em`/`rem` measure the declared font *size*, which is a number you chose; `ch` and `ex` measure something about the rendered *font itself*, which varies between typefaces at the same size. ## Practical notes - **Font loading.** Since `ch` depends on the font actually in use, a `ch`-sized column measured against a fallback font can shift slightly when the web font arrives, if the two fonts have different zero widths. - **Not just for max-width.** A `ch` value is a sensible width for an input that should hold a known number of digits — a postcode or a card-expiry field — because the reference glyph is literally a digit. Remember it is a visual hint only; the field's actual constraints live in the markup. - **Do not use it for vertical rhythm.** `ch` is a horizontal advance; heights belong to `em`, `rem`, `ex`, or line-based units. The interview-grade summary is short: `ch` is the width of a zero in the current font, it makes line-length limits self-adjusting instead of hard-coded, and it approximates rather than counts characters unless the font is monospaced.