Optimal Line Length on the Web

Just as if any human activity, such as scheduling and financing, reading exprience will be best when it is dealt with number. That's right, reading is no exception.

About a couple months ago, I found a fascinating article on line length called Secret Symphony: The Ultimate Guide to Readable Web Typography by www.pearsonified.com. It shows us one equation to caluculate the optimal line length to given font size and line hieght using golden ratio. For instance, if a paragraph of font size is 16px and its line height is 25px, the optimal line length would be 685px.

Even though the equation by www.pearsonified.com seemed to me to be very attracive first, when I tested how many characters it would be on a line with Helvetica Neue, the result was over 80. That was too wide inspite of its mathumatical harmony. After this test, I had done a little research on line length.

With a reference from "Typographie" by E. Ruder, Baymard Institute says “the optimal line length for your body text is considered to be 50-60 characters per line including spaces.” Refering to the same source from Baymard Institute, Material Design guideline by Google also concludes the ideal range of line length is 40-60.

"Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters," says webtypography.net. Moreover, Five simple steps to better typography says an optimum width is 2-3 alphabets in length, or 52-78 characters including spaces.

On paper

In order to know how many characters it contains per line on paper I looked at three books, Capital in the Twenty-First Century by Thomas Picketty, Business Adventures from Open Road Integrated Media, and Creativity, Inc. by Ed Catmull. From each book I chose 5 lines as a sample that qualify following rules: no text indent, no em dash (—), same font size throughout 5 lines. Here is the result.

• Capital: 74–79
• Business Adventure: 57–61
• Creativity, Inc: 63–68

Note that Business Adventure is a paperback and it is smaller, thus it inevitably has less amount of characters, which somehow ends up being the ideal that Baymard Institute suggests. Capital is the good sample. If we count characters per line throughout the book, there could be the line that contain more than 80 characters, nevertheless, it is better to think that all publishers are avoiding to contain more characters than that.

On the web

In addition to on-paper, I also had done a research on the web, applying the same rules as above but I chose 10 lines from each site this time.

• Google search results: 85–93
• Facebook: 71–81
• Twitter: 72–81
• Medium: 71–78
• nytimes.com: 73–77
• wsj.com: 66–73

On the web, most of websites never justify aligns of its paragrahs while on paper they are justified. And they don't hyphenate either. This results wide range of amount of characters per line—if the long word follows the break point the amount of characters on a line before would be less.

As designers strive for perfection, not only we want to achieve the optimal line length, but also we want to minimize vertical length of texts in order to maximize usability. We can see this from the results of Facebook and Twitter.

Conclusion

The optimal line length of body text on the web is as many as possible unless it's over 80 characters per line. In other words, target the amount of characters per line onto 70-75.

Here again, I tested and figured out the optimal line length to given font sizes with Helvetica Neue in pixel measure. You can see the pattern from below.

For CJK

Since I am japanese, as a bonus content I want to mention about Chinese, Japanese, and Korean case. According to the Okidata the optimal line length is 15~35 characters. CJK characters have square space: if the font size is set as 16px, its width also will be 16px. Please use this information usefully when you make your website.

謝謝。ありがとう。고마워。