Readability: The optimal line length

author:: Baynard Institute
source:: Readability: The Optimal Line Length
clipped:: 2022-05-11
published::

Topics: UX

Having the right amount of characters on each line is key to the readability of your text.

Users faced with overly long lines of text are more likely to avoid reading the text.

Varying line lengths ultimately end up impacting the overall readability of a site’s text.

Ruder concluded that the optimal line length for body text is 50–60 characters per line, including spaces (“Typographie”, E. Ruder).

Other sources suggest that up to 75 characters is acceptable.

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

Either way, long lines of text will be an impediment to users’ ability to gather more information about a product or service.

To ensure line lengths don’t exceed 80 characters, the CSS max-width property can be set using font-relative lengths of around 70ch or 34em (note that this value will need to be adjusted slightly up or down depending on the font used).

Additionally, using blocks of text together with bullet lists can help break up lines of text, as can structuring product pages by feature highlights.

However, it’s important to keep in mind that line length is only one component of text readability.

Additionally, in order to be in compliance with accessibility standards, text styling must be able to be set as follows:

By setting line lengths to support readability, sites will encourage users to learn more about their products and services — which, as our testing has shown, typically results in increased user interest and increases the likelihood that users will decide to purchase a product or service.