Text width on a landing page: what's the ideal line length for readability?

A text block centered on a 1440px-wide desktop layout, with no max-width set, can stretch to 150 characters per line — the eye has to travel almost the full width of the screen before finding its way back to the start of the next line, and loses its place along the way. The most cited typography rule to avoid this fits in one sentence: 50 to 75 characters per line, no more. It comes from Robert Bringhurst's typographic canon, and it works beautifully for a printed book. What rarely gets asked when designing a landing page is whether that rule was ever tested on a screen, with real readers scanning a page rather than reading a novel. Once you look at the studies that actually tested it, the answer is more nuanced than the rule itself.

What the research actually shows — and it's not what you'd expect

Two experiments by Ling and van Schaik (2006, International Journal of Human-Computer Studies) had participants read web pages set at four different line lengths (55, 70, 85, and 100 characters). The finding: no significant difference in reading speed or information-search efficiency across those four widths — but a clear subjective preference for the shortest line, 55 characters. In other words, a longer line doesn't objectively slow down reading on screen; it's simply perceived as less comfortable.

A second study, by Shaikh and Chaparro (2005, Human Factors and Ergonomics Society), cuts against the most common intuition: testing lines of 35, 55, 75, and 95 characters on online news articles, it was the longest lines (95 characters) that produced the fastest reading speed. Reported satisfaction didn't track speed, though: participants showed a marked preference for the two extreme lengths — very short or very long — over the middle-ground compromise most style guides recommend.

Both studies point in the same general direction: the "50-75 characters" range inherited from print typography has no demonstrated, consistent effect on reading speed or comprehension on screen. What it does capture is perceived comfort — widely shared, but not a physiological law of reading. For a landing page, that nuance reframes the problem: the goal isn't finding the magic character count, it's avoiding the two extremes that actually break reading — a line so long the eye loses the return sweep, or a column so narrow every sentence fragments into three choppy lines.

Why a landing page is neither a book nor a news article

Both studies test continuous reading of running text — closer to a blog post than to a landing page. A landing page isn't read linearly: most visitors scan it before deciding to actually read, spotting the headline, subheadings, and bullet lists before settling on a paragraph that speaks to them. So the width constraint doesn't carry the same weight for every block: a large hero headline can span the full width of its container without bothering anyone — it's read in a single glance, not line by line. A three- or four-sentence pitch paragraph, on the other hand, really is read as continuous text, and that's where block width matters.

The real problem: wide desktop screens, not mobile

On mobile, the problem mostly solves itself: screen width already caps text at roughly 35-45 characters per line, a range nearly every study on the topic finds comfortable. The real friction point shows up on desktop, especially on large screens (1440px and up), when a centered text block has no max-width and stretches to fill all available space. A paragraph running past 90-100 characters per line on a wide screen isn't doomed by the research to read more slowly — Shaikh and Chaparro even found the opposite for continuous text — but it does create a documented visual discomfort in both studies: the eye has to cover a longer horizontal distance to find the next line, raising the risk of skipping a line or losing your place, especially in the fast, skimming read of a landing page visitor in a hurry.

Putting it into practice, section by section

• Hero headline — let it breathe across the full width of its container (often 700-900px); at that font size, a 40-50 character line already fills the visual space without any reading issue.
• Subheadline and intro paragraph — constrain to roughly 60-70 characters per line (often a max-w-xl to max-w-2xl class in Tailwind, or max-w-prose, which targets 65 ch): this is where the perceived comfort documented by Ling and van Schaik matters most.
• Benefit and argument blocks — same logic as the intro paragraph; avoid a three-sentence block spanning the full width of an 800px column when the text isn't broken into a list.
• Bulleted lists — less sensitive to width: each item is short and scanned on its own rather than continuously, so the constraint can be looser.
• FAQ — answers benefit from staying in the same range as the intro paragraph; see our article on the landing page FAQ section for the full section structure.

Implementing it in CSS without overcomplicating it

On a Next.js/Tailwind project, there's no need to calculate a precise character count: Tailwind's max-w-prose utility directly targets 65 ch — a CSS unit equal to the width of the "0" character in the active font, which makes it a reliable approximation of characters-per-line regardless of font size. For text you want slightly more generous, leaning on the shorter-line preference Ling and van Schaik observed rather than the raw speed Shaikh and Chaparro measured, a value between max-w-md and max-w-xl works well for most narrative text blocks on a landing page. The simple check to run before shipping: open the page on a wide screen, pick a random paragraph line, and ask whether the eye genuinely has to travel the full width of the screen to reach it.

Common mistakes

• A text block with no max-width inheriting the width of the main container (often 1200px or more) — the most common case on "about" or "our method" sections copied from another section without a dedicated width constraint.
• A column forced too narrow on mobile while trying to preserve a desktop layout — less common, but just as disruptive: a sentence broken into three four-word lines breaks reading just as much as a line that's too long.
• Conflating headline width with body-text width — applying the same narrow max-width to the hero headline as to the paragraph beneath it often forces an awkward line break in the middle of a word group that should stay together.
• Chasing an exact character count instead of a comfortable range — the research itself doesn't converge on a single number; aiming for a reasonable zone matters more than matching, character for character, a rule quoted without its source.

Text width isn't the flashiest conversion lever on a landing page, but it's one of the simplest to fix once spotted — a max-width adjustment on a single component, without touching anything else on the page. The 10 LanderKit templates (€89 per template, €229 for the full pack) already ship their text blocks with a constrained width by default, from coaching to ebook sales: a clean starting point to adjust to your own copy's actual length rather than reinventing it page by page.