Set line length in characters with ch

Long lines are hard to read. The eye loses its place on the way back to the start of the next line. The comfortable range for body text is about 45 to 75 characters a line, and 65 is a good default.

A ch is the width of the 0 in the text’s own typeface and size. So 50ch means “as wide as 50 zeros”. The box grows and shrinks with the text, which a width in px can’t do.

Try it

The 0 is outlined at its exact width, beside letters that are narrower and wider. Below it, the same paragraph sits in a box set in ch and a box set in px. Change the text size: the ch box grows with the text and keeps about the same number of characters a line, while the px box stays 400px wide and fits fewer and fewer.

The playground uses 45ch, so the comparison fits on the page.

What it means for your designs

Think about text boxes as a number of characters, not a number of pixels. A line length set in ch holds true on every screen and at every size on a fluid type scale. A width in px only holds for the one size it was drawn at.

A ch is not one character of real text, though. The 0 is wider than most lowercase letters, so a line holds more characters than its ch number. In Christie’s typefaces, both sans and serif, the playground measures:

So the usual advice of 65ch gives lines that are too long in our typefaces.

• For body text, use about 50ch. That’s about 65 characters a line, in the middle of the comfortable range.
• For headings, use about 30ch, which is about 40 characters.
• Treat the numbers as a close guide, not a count. Copy with many wide letters, or many short words, fits differently.

In Figma

Figma has no ch unit, so a text box can only have a fixed width. Draw it at the width that gives the line length you want at that size, and add a note with the measure: “Body: max 50ch”. The developer then sets it in ch, and it stays right as sizes change.

To check a line length in Figma, paste in real copy and count the characters on a full line. Aim for 45 to 75. At 16px in Christie’s typefaces, 1ch is about 9.5px, so 50ch is about 475px.

Say this to a developer

“Can we cap body text at 50ch instead of a fixed width, and headings at about 30ch? Ideally as a token, so we can tune it in one place.”

1
:root {
2
  --measure: 50ch; /* about 65 characters in Christie's typefaces */
3
  --measure-heading: 30ch;
4
}
5

6
p,
7
li,
8
dd {
9
  max-inline-size: var(--measure);
10
}
11

12
h1,
13
h2,
14
h3 {
15
  max-inline-size: var(--measure-heading);
16
}

Watch out for

• Put the limit on the text, not on the section around it. Capped at the section, it also squeezes images, tables and code to a text measure they don’t need.
• Use ch for text, not for layout. A sidebar or grid column set in ch changes width when the typeface changes, so the layout jumps as the web font loads over the fallback font.

Browser support

Every current browser, and every browser for more than ten years.