# Limit line length to ~45–75 characters

UI Tip #008 · Typography & color · 2026-10-12 · https://ui.praveenjuge.com/8/line-length

> Long lines make the eye lose its place on the way back, and short ones break the rhythm. Give body text a max-width around 65ch and let the margins grow.

*Figure: A browser window whose paragraph narrows from full-width lines of 120 characters to a centred column of 65.*

## Why it matters

At the end of each line the eye jumps back to the start of the next one. On a very long line that jump is long and easy to miss, so people reread a line or skip one. On a very short line the jumps come so often that reading turns choppy. Somewhere between 45 and 75 characters, reading stays smooth.

## How to do it

- Give the text, not the page, a maximum width. In CSS, `max-width: 65ch` is a good start:

  ```css
  .prose {
    max-width: 65ch;
    margin-inline: auto;
  }
  ```

- `ch` is the width of the zero, and most letters are narrower, so 65ch holds a little more than 65 characters.
- Let the margins grow on wide screens. Empty space beside a column is fine; an article that spans a 27-inch monitor is not.
- Longer lines need more line height to keep the jump back easy. Short ones can be tighter.

## When it bends

The range is for paragraphs. Labels, tables, code and captions follow their content. On a phone, lines of 35 to 45 characters are normal and fine.

## Sources

- [Line length, Butterick’s Practical Typography](https://practicaltypography.com/line-length.html)
- [Visual Presentation, WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html)

---

From [UI Tips by Praveen Juge](https://ui.praveenjuge.com). Free to share, with a link back to https://ui.praveenjuge.com/8/line-length.