What is the ideal line length for readable text?

The ideal line length, also called the measure, for body text is roughly 45 to 75 characters per line, including spaces and punctuation, with about 66 characters widely regarded as the sweet spot for a single column of text. This guidance comes from long typographic practice and is repeated in Robert Bringhurst's The Elements of Typographic Style. On small screens, 35 to 50 characters is normal and comfortable. WCAG 2.2 Success Criterion 1.4.8 at Level AAA sets a maximum of 80 characters for blocks of text, or 40 for Chinese, Japanese and Korean. In CSS, the simplest way to apply this is a max-width in ch units on your text container, such as max-width: 65ch, which keeps lines near the target regardless of screen width.

Line length is one of the easiest readability problems to fix and one of the most commonly ignored. Full-width paragraphs on a wide monitor can easily stretch past 150 characters, which makes reading tiring. In this article you'll learn why line length affects reading, how to measure it, how the ch unit really works, how to build responsive layouts that keep lines readable, and how line length interacts with font size and line height.

Why Line Length Matters

When you read, your eyes don't sweep smoothly across a line. They make a series of short jumps and pauses, then a long return sweep back to the left to find the beginning of the next line. Line length affects both parts of that process.

Lines That Are Too Long

• The return sweep is harder: The further the eye travels back, the easier it is to land on the wrong line, either rereading the same one or skipping one.
• Reading feels like effort: Long lines look dense and intimidating, which encourages skimming.
• Line height has to work harder: Long lines need more leading to keep each line distinct, which spreads text out further.

Lines That Are Too Short

• Rhythm breaks up: The eye has to return to the left too often, so reading becomes choppy.
• Awkward breaks: Short lines leave more single words on lines and more uneven ragged edges.
• Hyphenation and justification suffer: In justified text, short lines produce large, uneven word gaps.

The 45 to 75 range sits between these two problems. It's a convention backed by centuries of book typography rather than a hard law, and research on reading speed versus comfort hasn't produced one single answer. But for comfortable sustained reading, it remains a reliable target.

How to Measure Line Length

The measure is counted in characters, not words or pixels, because character count is independent of font size. Count every character on a typical line, including spaces and punctuation.

A quick manual method is to place a mark at the 45th and 75th character of a line. In 1,000 characters of normal English text you'll usually find around 160 to 180 words, so a 66-character line holds roughly 10 to 12 words.

Measuring in the Browser

You can measure the actual number of characters on each line of a paragraph with a short script. Paste this into the browser console, then click on a paragraph:

document.addEventListener(
  "click",
  (event) => {
    const el = event.target.closest("p, li");
    if (!el) return;

    const node = el.firstChild;
    if (!node || node.nodeType !== Node.TEXT_NODE) {
      console.log("Click a paragraph with plain text content.");
      return;
    }

    const range = document.createRange();
    const lines = [];
    let lineTop = null;
    let count = 0;

    for (let i = 0; i < node.length; i++) {
      range.setStart(node, i);
      range.setEnd(node, i + 1);
      const rect = range.getBoundingClientRect();
      if (rect.height === 0) continue;

      if (lineTop === null || Math.abs(rect.top - lineTop) > rect.height / 2) {
        if (lineTop !== null) lines.push(count);
        lineTop = rect.top;
        count = 0;
      }
      count++;
    }
    lines.push(count);

    const full = lines.slice(0, -1);
    const avg = full.length
      ? Math.round(full.reduce((a, b) => a + b, 0) / full.length)
      : lines[0];

    console.log(`Lines: ${lines.join(", ")}`);
    console.log(`Average characters per full line: ${avg}`);
  },
  { once: true }
);

Lines: 71, 68, 73, 70, 66, 38
Average characters per full line: 70

The script ignores the last line, which is usually short. It works on paragraphs that contain plain text without links or inline formatting, which is enough for a quick check.

Setting Line Length With the ch Unit

The ch unit is equal to the advance width of the 0 (zero) character in the element's font. That makes it a natural way to size a text container by characters:

.prose {
  max-width: 65ch;
  margin-inline: auto;
  padding-inline: 1rem;
}

What ch Actually Measures

The 0 in most proportional fonts is wider than the average lowercase letter, and spaces are narrower still. As a result, a container of 65ch usually fits more than 65 characters of real text, often somewhere around 70 to 80 depending on the typeface. If you want an average of about 66 characters, a value somewhere between 55ch and 65ch is often closer. Measure your actual typeface with the script above and adjust.

Because ch depends on the font, the value changes when a fallback font is used before your web font loads. That's usually fine for a maximum width, but it's another reason to choose a fallback with similar proportions.

Apply the Width to Text, Not the Whole Layout

A common pattern is to give the article a readable measure while letting images, code blocks and tables use more space:

.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(65ch, 100% - 2rem) [content-end]
    minmax(1rem, 1fr) [full-end];
}

.article > * {
  grid-column: content;
}

.article > .wide,
.article > figure,
.article > pre {
  grid-column: full;
}

With this layout, paragraphs and headings stay within a comfortable measure, and selected elements can break out to the full width. The min() function keeps the content column from overflowing on narrow screens.

Line Length on Different Screens

Phones

On a typical phone held upright, body text at 16px to 18px gives around 35 to 45 characters per line. That's below the classic range but works well, because the return sweep is short and the whole line is in view at once. Don't shrink the font size just to fit more characters on a line; a smaller font is a bigger problem than a shorter measure.

Tablets and Laptops

This is where the max-width rule does its job. Without it, a tablet in landscape or a laptop can produce lines of 100 characters or more.

Large Monitors

On very wide screens, a single readable column leaves plenty of empty space. That's acceptable. You can use the space for a table of contents, notes or related content in a side column, but don't widen the text column to fill it.

Scaling Font Size and Measure Together

As screens get larger, you can increase the font size slightly, which keeps the measure in characters roughly stable while making text more comfortable at a greater viewing distance:

:root {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
}

.prose {
  max-width: 62ch;
  line-height: 1.6;
}

Because the container is sized in ch, it grows with the font size and still holds about the same number of characters per line.

Line Length and Line Height

Line length and line height are linked. Longer lines need more space between them so the eye can follow each line back to its start. Shorter lines can be set a little tighter.

Measure	Typical line height
Around 35 to 50 characters (phones, narrow columns)	1.4 to 1.5
Around 50 to 70 characters (standard article column)	1.5 to 1.6
Around 70 to 85 characters (wide but acceptable)	1.6 to 1.75

These are starting points, not rules. The typeface's x-height and weight shift them too. For a fuller guide, see what leading is and what line height to use.

Line Length for Other Kinds of Text

The 45 to 75 range is for continuous reading. Other types of text follow different guidelines:

• Headings: Short headings are fine at any length, but very wide headings that wrap awkwardly benefit from text-wrap: balance, which evens out line lengths.
• Captions and notes: Shorter measures of 30 to 50 characters suit small text.
• Multi-column layouts: Each column should be in the readable range on its own. CSS columns can enforce this with column-width.
• Code: Many style guides limit code to 80 to 120 characters per line, for different reasons, including side-by-side diffs.
• Data tables: Cells contain short items and don't follow body text rules, though long text cells should still wrap at a readable width.
• Chinese, Japanese and Korean text: Characters are wider and carry more meaning per character, so line lengths in characters are lower. WCAG sets 40 characters as the AAA limit.

Here's an example of multi-column text that keeps each column readable:

.notes {
  column-width: 32ch;
  column-gap: 2.5rem;
}

The browser creates as many columns as fit while keeping each at least 32ch wide. Use columns only for short content, because readers dislike scrolling down and back up to continue reading.

Common Line Length Mistakes

• No maximum width on article text: The most common problem, particularly in content management system themes with full-width templates.
• Setting width in pixels only: A max-width: 700px that's right for 18px text becomes too narrow if the user increases their default font size. Using ch, em or rem keeps the measure tied to text size.
• Reducing font size to shorten lines: Make the column narrower instead.
• Forgetting padding on mobile: Text pressed against the screen edge looks cramped and can be hard to read. Keep at least 1rem of padding on each side.
• Applying the measure to everything: Images, tables and code blocks often deserve more width than paragraphs.

---

FAQ: Ideal Line Length

---

Conclusion

The ideal line length for continuous reading is about 45 to 75 characters, with around 66 as a classic target and 35 to 50 being comfortable on phones. Lines that are too long make it hard to find the next line, and lines that are too short break the reading rhythm. WCAG's AAA guidance caps blocks of text at 80 characters, which is a sensible upper limit for any site.

In CSS, put a max-width in ch units on your text container, check the actual character count with your chosen typeface, and let images and code break out wider when they need to. Adjust line height alongside the measure, scale font size rather than cramming text, and your paragraphs will be comfortable to read on every screen.