Having the right amount of characters on each line is key to the readability of your text. It shouldn’t merely be your design that dictates the width of your text, it should also be a matter of legibility.
The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable. So what’s the downsides of violating this range?
- Too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
- Too short – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).
It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently, see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).
In order to avoid the drawbacks of too long and too short lines, but still energize your readers and keep them engaged, we suggest keeping it within the range of 50-75 characters per line.
How to achieve the optimal line length in web design
In web design you can achieve an optimal number of characters per line using em or pixels. (You achieve the best results with em but it can also be a bit more tricky to work with than pixels.) Regardless of which one you choose, your layout will have to be in a fixed width if you want to achieve an optimal line length for the majority of your visitors.
This is one of the reasons we don’t recommend using liquid layouts – you practically force the user to resize their browser window if they want a good reading experience on your site. When you consider the myriad of different window sizes used nowadays, it’s obvious that a liquid layout will result in a more or less random line length.
Here at baymard.com we use Arial in size 17 for our articles. With a 504-pixel wide article container, we end up with about 65 characters per line.
Do you know your line length in characters? Is it within the 50-75 range? It should be, if you want your visitors to have a good reading experience.
Voice your thoughts in a comment.
Update (13 Feb 2011): thanks to Charles Roper for pointing out this great bookmarklet that easily counts the characters of whatever you highlight.
Image by m4tik.