The ideal line length for digital text

This content originally appeared on DEV Community and was authored by Rob O'Leary

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

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, now ), 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.

The nuances to the recommended range for line length

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:

1. People read casually and skim through text when they want to get a sense of the content.
2. People scan with purpose when they are looking for a specific piece of information. They might only read a word or the first couple of characters of a word as they scan the screen.
3. People read in an engaged manner when they find something that they are interested in. They will slow down and read the whole text.

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 answer

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 of the script counts, 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.

What did Wikipedia do with regard to line length for their recent redesign?

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:

1. Wiki pages can be very long, and contain a large amount of information. They are not uniform from one page to the next. As a result, people have a need to skim and search within pages. This is different than the linear reading of a typical online article.
2. It is not straightforward to achieve a specific number of characters per line because wiki pages contain many elements that are floated inline alongside text e.g. infobox
3. The narrower the content is made, the longer the page gets. Perhaps this makes scanning more difficult as well, because it involves more scrolling.

Section from wikipedia page that has floated inline element. You can see this reduces the line length.

The design objective was to take into account these distinctions:

• The width should be limited by some amount to accommodate focused/engaged reading. This means shorter line lengths, and less density.
• At the same time, readers should be able to skim and search around, obtaining a visual map of the page without having to scroll too much. This is an argument for longer line lengths, and more density.

They arrived at two conclusions:

1. It seems that a 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.
2. It seems worthwhile to conduct a study focusing on the readability of Wikipedia articles specifically. They hope to be able to find the resources to do this.

Inspecting the CSS on an english wiki entry, it looks like content is limited with max-width: 960px;.

Closing thoughts

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.

1. 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. ↩

2. 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. ↩

3. 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. ↩

4. 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. ↩

This content originally appeared on DEV Community and was authored by Rob O'Leary