A core function of any website should be to offer a comfortable reading experience. The length of a line of text (or measure in typographic parlance) affects reading speed and comprehension. What is the ideal length of a line of text?
The quick and dirty answer usually given is somewhere between 40 and 80 characters per line (cpl).
The well-regarded book on typography, The Elements of Typographic Style (first published 1992), makes this statement on page 26:
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.
The recommened ranges are usually derived from the hypothesis that long lines slow a reader down because it can be difficult for the reader to quickly return to the start of the next line (saccade), and if lines are too short more scrolling or paging will be required.
Researchers have suggested that longer lines are better for quick scanning, while shorter lines are better for accuracy. There is more nuance to this, but that is the conventional wisdom.
The Web Accessibility Initiative (WCAG) guideline 1.4.8 has the following recommendation on making text accessible:
For people with some reading or vision disabilities, long lines of text can become a significant barrier. They have trouble keeping their place and following the flow of text. Having a narrow block of text makes it easier for them to continue on to the next line in a block.
Lines should not exceed 80 characters or glyphs (40 if CJK), where glyphs are the element of writing in the writing system for the text. Studies have shown that Chinese, Japanese and Korean (CJK) characters are approximately twice as wide as non-CJK characters when both types of characters are displayed with characteristics that achieve the same readability, so the maximum line width for CJK characters is half that of non-CJK characters.
For east asian scripts (Chinese, Japanese, and Korean), the line length should be half of that other scripts.
There is no consensus found from research regarding typical content on the web. One proposal suggested that the best compromise between reading speed and comprehension, is to use 55 cpl. On the other hand, there have been studies that have shown that digital text at 100 cpl can be read faster than text at 25 cpl, while retaining the same level of comprehension.
It does seem that more extreme line lengths (very short or very long) is divisive with readers. In the The Optimal Line Length in Reading - A Literature Review (2005) paper, it concluded that “moderate line length in between 50 to 70 cpl [characters per line] are the easiest to read and users do not prefer extreme line lengths (very short or very long) while reading from [a] screen”.
You may be thinking, like I did when I looked into this, is this type of research worth following if it has variable, contradictory conclusions?
My own take is that people are variable - people have different preferences and abilities. Picking one line length that is right for everyone is not possible. It is best to look for a satisfactory middle ground.
It is also important to understand people read in different ways depending on their objectives:
The Nielsen Norman Group has done eye-tracking studies over the years to discern how people read online. Their conclusion is that people primarily scan, rather than read. People are not likely to read your content completely or linearly. Based on that information, maybe you should tend more towards the upper limit of the recommended range to optimize for scanning.
The more accurate, boring answer to the question posed is: it depends!
Line length is one input into how comfortable reading text is: the typeface (
font-family), text size (
font-size), line height (
line-height), line length (usually
width of block element that has text content), letter spacing (
letter-spacing), and language all contribute to the readability of text.
The ideal text size is influenced by the chosen typeface because characteristics such as x-height impact legibility. Some typefaces are not recommended for body text because of their inherent characteristics e.g. decorative fonts are usually a bad choice.
The text size influences the preferable line height and line length. Because readers scan content both horizontally and vertically, lines of text should be distinct. A line height that is too small could undermine horizontal eye movement and encourage scanning down the left edge. It could also force people to reread lines of text.
The language used has an influence too. As mentioned earlier, east asian scripts should have a shorter line length.
I think that it is better to take a holistic approach and not just to gun for a magic number for line length. Make your decisions for your typeface and text sizes first, then choose the other inputs accordingly. Do some basic testing to see if tweaking the inputs can improve the reading experience.
Recently, Wikipedia rolled out a redesign of their website. As one of the most read sources on the internet, it may be enlightening to see what their thought process was.
The research carried out by the Wikipedia team regarding line length is documented under the feature: limiting content width. They did a bit of a literature review, and they discuss the considerations and constraints that were factored into their decision.
Wikipedia said that based exclusively on the recommended line length, it would be reasonable to set the content width at somewhere around 700px. However, their content is not typical:
The design objective was to take into account these distinctions:
They arrived at two conclusions:
max-width in the range of 800–1000px is a sensible starting point. They will center the content on the page to ensure that it looks good with the sidebar both open and closed.
Inspecting the CSS on an english wiki entry, it looks like content is limited with
I would treat 40 to 80 characters per line as a rule of thumb, half that for east asian scripts. For the sake of accessibility, I would not stray from that. You can decide on a specific line length based on your other typographic choices (typeface, text size…etc) and your content. Maybe, more conclusive research will be done in the future to give us more definitive guidelines for typography on the web. I want to dig into this more soon.
Ling, J., & Van Schaik, P. (2006). The influence of font type and line length on visual search and information retrieval in web pages. International Journal of Human-Computer Studies, 64(5), 395-404. ↩︎
Dyson, M. C., & Haselgrove, M. (2001). The influence of reading speed and line length on the effectiveness of reading from screen. International Journal of Human-Computer Studies, 54(4), 585-612. ↩︎
Dyson, M. C., & Kipping, G. J. (1998). The Effects of Line Length and Method of Movement on Patterns of Reading from Screen. Visible Language, 32(2), 150-181. ↩︎
Nanavati, Anuj A; Bias, Randolph G. (2005). Optimal Line Length in Reading - A Literature Review from Visible Language; Cincinnati Vol. 39, Iss. 2, 120-144. ↩︎