Font Blend

Tools

Text Measure Tool

A text measure tool checks the readability of a column of body text by counting characters per line. The measure, or line length, is one of the most important factors in readable typography, and 45 to 75 characters per line is the conventional target set by Robert Bringhurst. Set the font, size, line height, and container width and the tool returns the measure, the line count, and a verdict.

Loading the text measure tool...

What Is the Measure in Typography?

The measure is the length of a line of text, usually counted in characters per line. It is one of the oldest and most stable ideas in typography. Robert Bringhurst, in The Elements of Typographic Style, sets the working range for book text at 45 to 75 characters per line, with 66 characters as a common target. That range predates the web by centuries and still holds because it follows the geometry of the reading eye, not the rendering surface.

Two factors govern the measure: the column width and the font size. A wider column at a fixed font size fits more characters per line. A larger font size at a fixed column width fits fewer. The two have to move together. Doubling the column width without raising the font size produces a long, tiring line. Doubling the font size without widening the column produces a cramped one.

Line height interacts with the measure. Long lines need more leading so the eye can find the next line on the return sweep. Short lines need less. The line height calculator picks the leading for a given size and use case; the measure tool picks the width. The two answers should be set together.

How to Set the Measure in CSS

The canonical CSS technique is the ch unit. One ch is the width of the 0 character in the current font, which is a stable proxy for the average character width. Setting max-width: 65ch on a content container produces a 65-character line in any font, at any size, on any viewport. That single rule does most of the work.

article {
  max-width: 65ch;     /* 45 to 75 characters per line */
  font-size: 1rem;     /* 16px at default root */
  line-height: 1.5;
}

Pixels, rem, and em also work, but each has a tradeoff. Pixels and rem fix the column width regardless of the font, so swapping fonts changes the character count. em scales with the font size, which keeps the character count more stable but still varies between fonts. The ch unit tracks the font directly, which is why the MDN reference on length units recommends it for column widths.

For responsive layouts, pair max-width: 65ch with a fluid font size. The fluid typography generator builds the clamp() rule for you, and the measure stays in the readable range across every viewport.

Related Tools

The measure belongs to a small family of related decisions: leading, scale, the font itself, and the layout it lives in. Each of these tools handles one of them.