The ideal line length for web text: about 60 to 75 characters
For body text in a single column, aim for roughly 60 to 75 characters per line, counting spaces. Set it in CSS with a maximum width in ch units, around 60 to 70ch depending on the font, and let lines shorten naturally on phones. Lines much longer than that make it hard to find the start of the next line; much shorter ones break the rhythm of reading.
Where the range comes from
The guidance is older than the web. Book typographers have long recommended lines of about 45 to 75 characters for a single column of text, and Robert Bringhurst's widely used The Elements of Typographic Style gives that range with around 66 as a comfortable middle. The reasoning carries over to screens: the eye moves along a line in short jumps and has to sweep back to the start of the next line. When a line is very long, that return sweep is long and easy to misjudge, so readers lose their place or reread a line. When it's very short, the eye returns so often that reading becomes choppy, and sentences break awkwardly.
Accessibility guidance points the same way. WCAG's Visual Presentation criterion, at level AAA, asks that blocks of text can be presented with a width of no more than 80 characters (40 for Chinese, Japanese and Korean text). That's a ceiling, not a target.
Optimal line length by context
| Text | Comfortable range | Notes |
|---|---|---|
| Article or page body, one column | 60 to 75 | The default for anything read in full |
| Body on phones | 35 to 50 | Comes naturally from screen width at 16 to 18px; don't force it narrower |
| Multi-column text or sidebars | 40 to 50 | Shorter lines are fine when columns sit side by side |
| Intro or lede under a headline | 35 to 45 | Larger text, so fewer characters fit comfortably |
| Headlines | No fixed rule | Balance lines so a single word isn't left alone |
| Captions, footnotes | Up to the width of the image they belong to | Keep them short |
Setting max width for paragraphs in CSS
The ch unit is defined as the width of the “0” character in the current font, as MDN's CSS length reference explains. Because it scales with the font size, max-width: 65ch keeps the measure stable whether text is 16px or 20px, which a pixel width can't do. In most proportional fonts the average character is narrower than a zero, so 65ch usually holds somewhat more than 65 characters of real text. Start around 60 to 68ch and check by counting a few lines.
- Apply it to text, not to the whole layout. Put the max-width on paragraphs, lists and the article column, and let images, tables and full-width bands use the wider container.
- Left-align the text column within a wide page, or centre the column as a block with
margin-inline: auto. Never centre the lines themselves. - Keep side padding on phones. On a 375px screen, 16 to 20px of padding on each side leaves room for roughly 40 characters at 17px, which is about right.
- Scale headlines separately. A short max-width on very large headings, such as 20ch, stops them running across the whole screen;
text-wrap: balanceevens out the lines in browsers that support it. - Respect zoom. Because ch units scale with text size, zooming in keeps lines readable and lets them wrap, which also helps with reflow.
Common mistakes
- Full-width paragraphs on a wide screen. On a 1440px monitor, unconstrained body text can run past 150 characters per line.
- Measuring in pixels. A 600px column holds about 70 characters at 16px but only about 55 at 20px.
- Narrow text beside a large image in a split layout, giving five or six words per line on a laptop. Give text at least 45 characters, or stack the layout earlier.
- Justified text in narrow columns, which creates uneven gaps between words.
Line length and line height work together: longer lines need slightly more spacing between them so the eye can track back. See line height for body text, and for type size, website body font size.
Line length in Anticode
Anticode's design systems apply measures in ch for the text that runs widest. The hero's supporting paragraph is capped at 38ch, which suits its larger size, the introduction under each section heading at 42ch, and large pull quotes at 24ch. Pages sit in a container of at most 1160px with side padding of at least 20px, and other body text sits inside grid columns or split layouts that keep lines well short of the full page width. Body text is left-aligned in all seven systems, at 16.5 to 19.5px depending on the system.
The code editor (Pro mode) keeps only text, section order and colour tokens, so you can't set a different measure by hand there. If you export the site as HTML or a Next.js project and add long-form text, such as an article, give its container a max-width of around 65ch to keep it in range.
Questions people ask
How many characters per line is best for reading?
About 60 to 75 for a single column of body text on larger screens, and whatever fits comfortably on a phone, usually 35 to 50.
What max-width should paragraphs have?
Around 60 to 70ch. The ch unit scales with the font, so the measure stays consistent at different sizes and zoom levels.
Does line length matter on mobile?
Phones already produce short lines. Keep normal side padding and don't narrow text further; the main risk is on wide screens.
Sources
- Understanding SC 1.4.8: Visual Presentation, W3C, checked
- <length>, MDN Web Docs, checked
- Understanding SC 1.4.10: Reflow, W3C, checked