01
Measure
Line length is the most common typography mistake on the web. It costs you readers before they finish a sentence.
5 min read
Interactive demos in this lesson work best on a wider screen. You can still read the article below; drag-and-drop examples are hidden on mobile.
Continue with ContrastAlmost every website you've built has lines of body text that are too wide. It's the easiest fix in typography. One line of CSS, and it's almost never applied.
Compare
The quick brown fox jumps over the lazy dog. A developer reading documentation or a founder reading a landing page is doing the same thing: trying to extract meaning quickly. When the line is too long, that extraction costs more effort than it should.
Lines of body text work best between 45 and 75 characters. Below 45, the eye jumps too frequently and reading rhythm breaks. Above 80, the return saccade starts to fail.
Line Width
The quick brown fox jumps over the lazy dog. Repeat the line in your head as you drag. Feel where reading becomes comfortable and where it starts to strain.
Notice how at 45 characters the rhythm feels choppy. At 105, you lose your place returning to the next line. The sweet spot, and you felt it, is somewhere in the 60 to 70 range.
You've seen this in the wild. A portfolio or docs page where the text container spans the full viewport on a 27 inch monitor. The CSS is "fine." The layout is balanced. The measure is wrong.
Developers often apply max-width to the page wrapper instead of the text container. The column looks constrained because the sidebar and hero are bounded, but the paragraph itself still runs too wide. Measure is a property of the text block, not the page.
The Rule
Set max-width: 65ch on every container holding reading text.
At widths above 80 characters, the eye struggles to find the start of the next line after the return saccade, causing rereading and comprehension errors. At widths below 45 characters, reading rhythm breaks from excessive line jumps.
p, li, blockquote, .prose {
max-width: 65ch;
}p, li, blockquote, .prose {
max-width: 65ch;
}Common Mistake
Applying max-width to the page wrapper instead of the text container. The layout looks bounded, but the body text inside still runs the full column width without any constraint of its own.