Balancing Line Length And Font Size In Responsive Web Design

by Samm Bennett

Interesting piece discussing making written content legible on the web, with a particular focus on scaling on mobile devices (the same advice can easily be extended to apps). The article touches on something that is too easily ignored: line length.

If a casual reader gets tired of reading a long horizontal line, then they’re more likely to skim the left edge of the text. If an engaged reader gets tired of reading a long horizontal line, then they’re more likely to accidentally read the same line of text twice (a phenomenon known as “doubling”).

65 characters (2.5 times the Roman alphabet) is often referred to as the perfect measure. Derived from this number is the ideal range that all designers should strive for: 45 to 75 characters (including spaces and punctuation) per line for print. Many web designers (including me) apply that rule directly to the web.

Basic advice: optimize the font size for legibility, then fine tune the line measure. Bonus tip: keep line height at 150% the font size.