Paragraph Width

Paragraph width (or measure, in typographic terms) refers to the length of a line of text, typically expressed in characters per line (CPL). Robert Bringhurst's Elements of Typographic Style recommends 45-75 characters as the optimal range, with 66 as the ideal. This isn't arbitrary—it's rooted in how the human eye tracks across lines and returns to the next one. At the optimal width, the eye can comfortably complete the saccade-and-return reading pattern. Too wide and readers lose their place; too narrow and constant line breaks fragment thoughts and slow comprehension.

stellae.design

Visual Design

Why It Matters

Paragraph width — often called line length or measure — directly affects reading speed, comprehension, and fatigue because the human eye struggles to track back to the start of the next line when lines are too long, and loses reading rhythm when lines are too short. Research consistently shows that an optimal measure of 45-75 characters per line balances comfortable saccadic eye movement with efficient reading pace. Getting line length wrong is one of the most common and most impactful typographic mistakes in digital interfaces, silently degrading the experience for every user who reads body text.

Real-World Examples

Medium's reading experience

Medium constrains its article body to approximately 680 pixels wide at desktop sizes, yielding roughly 65-75 characters per line with their serif typeface. This deliberate measure creates a focused reading corridor that minimizes eye strain across long-form articles. The centered layout with ample whitespace on either side further reinforces the book-like reading experience that keeps users engaged.

Documentation sites using ch-based max-width

Sites like the Rust documentation and MDN Web Docs set content containers using character-unit widths so the measure adapts automatically when code fonts differ from prose fonts. This approach ensures that both explanatory paragraphs and inline code samples remain readable without manual width adjustments. Users who increase their default font size for accessibility reasons benefit because the line count remains comfortable at any scale.

Counter-example

Full-width text on a widescreen monitor

A corporate intranet renders body text spanning the full width of a 2560-pixel ultrawide display, producing lines that exceed 200 characters. Users lose their place constantly when tracking back to the next line, leading them to unconsciously narrow the browser window or avoid reading entirely. The design technically fills the available space but makes the content functionally unusable for sustained reading.

Role-Specific Guidance

Common Mistakes

• Developers often set a `max-width` in pixels based on a specific font at a specific size, then change the typeface or scale without rechecking the character count, inadvertently breaking the reading experience. Designers sometimes prioritize visual symmetry or whitespace ratios over actual character count, resulting in columns that look balanced in Figma but read poorly with real content. Another frequent error is applying the correct measure to desktop layouts while letting mobile text run from screen edge to screen edge without horizontal padding, trading one readability problem for another.