Line length

Line length (typography’s measure) is the number of characters on one line of running text, spaces included. Too long, and the eye loses its place on the way back to the start of the next line; too short, and it has to jump back so often that the reading rhythm breaks. Baymard Institute’s usability research (Edward Scott, 2022) puts the comfortable range at 50–75 characters per line, and reports test users either leaving a page of over-long lines or skimming it without taking it in.

The range is old and consistent across sources:

• Emil Ruder’s Typographie (1967) gives 50–60 characters.
• Bringhurst’s The Elements of Typographic Style, as quoted in The Elements of Typographic Style Applied to the Web, calls 45–75 satisfactory and 66 ideal.
• WCAG 1.4.8 Visual Presentation (level AAA) sets a ceiling of 80 characters, 40 for Chinese, Japanese and Korean.

Baymard also lists a set of spacing values (letter spacing 0.12 em, word spacing 0.16 em, paragraph spacing 2× the font size) as accessibility requirements. In WCAG those numbers are 1.4.12 Text Spacing: a user must be able to apply them without content breaking. They are a tolerance to design for, not values to set.

Age note. The article is from 2022-05, and none of it has aged: the range comes from mid-twentieth-century print typography, and the CSS advice still holds.

Setting it in CSS

Line length is set with a maximum width in a font-relative unit, so it scales with the type:

p { max-inline-size: 60ch; }

⚠ 60ch is not 60 characters. 1ch is the advance width of the “0” glyph, and digits are wider than the average character in running text, which is full of narrow i, l, t and spaces. A ch measure therefore holds more characters than its number. How many more depends on the face: measure it rather than assume it.

Baymard suggests `70ch`; in this site's face that would set lines of about 84 characters, over WCAG's 80.

ch also changes with the font: while a fallback face shows, the same 60ch resolves to a different width (see Layout shift, where Arial’s ch runs about 5% wider than Source Sans’s even after metric matching).

On a phone in portrait the column is narrower than any sensible maximum, so the screen, not the CSS, sets the line length, and lines fall below 50 characters. Baymard treats that as the lesser problem; the maximum matters in landscape and on larger screens.

In jedee

The measure is Eleventy Excellent’s stock rule in global/blocks/prose.css:38:

.prose :is(p, li, dl, blockquote) {
  max-inline-size: 60ch;
  text-wrap: pretty;
}

jedee’s own additions reuse the number: .intro (the lede under a post title) in local/post.css:8 is also 60ch, and the webmention list in local/webmentions.css:30 is 40ch. The prose column around them is --wrapper-width: 64rem, so the ch cap, not the column, is what limits a paragraph on a desktop screen. Text wrapping covers the text-wrap half of the same rule.

What 60ch actually sets, measured on 2026-09-10 in the built site: characters per rendered line in paragraphs of plain running text (no inline code), last lines excluded, in Source Sans.

viewport	font size	paragraph width	characters per line (median, 10th–90th percentile)
1920 px	28 px	835 px	72 (67–75)
1280 px	27.3 px	813 px	72 (67–75)
768 px	22.8 px	657 px	70 (63–74)
390 px	19.5 px	325 px	39 (36–42)

So 60ch in Source Sans holds about 1.2 characters per ch: lines of about 72 characters, at the top of the 50–75 range rather than in its middle, and inside WCAG’s 80. At 768 px the viewport is already narrower than 60ch, and at 390 px lines drop to about 39. Nothing has been changed on the strength of this; a measure aimed at the middle of the range would be about 52ch in this face.

Raw source: src/_raw/Readability The Optimal Line Length.md (Edward Scott, Baymard Institute, 2022-05-10). ⚠ The clip captured only Baymard’s site navigation, not the article; this page was written from the live article.