27 December 2012 (age 22) Web

Line length and readability: speed vs. user experience

There is no shortage of opinions about the optimal line length for content on the web, especially in today’s world of varying screen sizes and fluid layouts. However, many of these articles tend to focus on the speed and efficiency of reading rather than on users’ perceptions. In my opinion, the user experience is much more important than actual reading speed. I don’t care how long it takes someone to read an article; I just want them to enjoy their time on my site.

With that in mind, all the research I’ve found concludes that readers prefer reading content with fewer characters per line (cpl), no matter how they perform objectively in terms of speed.

Dyson and Kipping (1997) compared a single-column layout with a line length of 100cpl to a 3-column layout with a line length of 30 cpl. They found that while a wide, single column results in faster reading speeds, people prefer reading in multiple narrower columns.

Dyson and Haselgrove (2001) found that a line length of 55 cpl (as opposed to 25 cpl or 100 cpl) “produced the highest level of comprehension and was also read faster than short lines”.

Bernard, Fernandez, and Hull (2002) compared line lengths of 45, 76, and 132 cpl. They found that medium-width and narrow line lengths (45-75 cpl) make it easier to concentrate on the text, and that a line width of 76 cpl provides the most desirable layout.

Ling and van Schaik (2006) found no significant differences in reading speed or efficiency for different line lengths (options were 55, 70, 85, or 100 cpl), but participants preferred the 55 cpl line length.

Based on these findings, it seems that the old print industry standard of 45 to 75 cpl is still a useful measurement for content on the web.

This is a good thing to keep in mind when designing websites that cater to a plethora of browsers, screen sizes, and default font settings. The Kindle, for example, eschews the standard 16px default font size. Devices with higher pixel densities like the iPhone cause all kinds of other layout issues.

Going forward, we have to start using em-based layouts. Hardware will only become more fragmented, and em-based layouts ensure that content will look right no matter how it’s accessed. Through all this, it’s important to keep content at a readable width. The trick is, how will you define “readable” - based on speed, or based on the user experience?

Sam Nabi

Post a comment

Comments are closed.