Recently, one of our clients challenged me regarding the line length and alignment of text on a couple of pages of a website we are creating for them, citing research from the Baymard Institute, a regular port of call for User Experience (UX) Practitioners all over the world.
While we always design our websites with the W3C’s Web Content Accessibility Guidelines (WCAG) standards in mind, I personally found some of the guidance in accepted doctrines to be a little out of kilter with modern web design practice. In exploring our response, I thought the topic was interesting enough to merit further in-depth analysis.
Line length guidelines
A quick google search, as well as the Baymard article in question (Readability: the Optimal Line Length) quickly established that a common recommendation for maximum readability is between 50-75 Characters Per Line (CPL), and that left-aligned text was the easiest to read.
Seems pretty clear cut, right? The thing is though, in some layouts it’s impractical to keep lines this short. It got me thinking about where this figure actually comes from and how the advent of the responsive web has changed how people consume content online.
My personal take on UX ‘guidelines’ of any kind comes down to two key points:
Technology changes quickly, and humans are changing with it. Most of the do’s and don’ts on any particular subject might not be up to date with current practice. As such, it’s worth thinking about when particular guidance was researched and written.
UX done right is entirely contextual, and therefore any absolute guidance (“only use XX-XX words on a line”, or “only have XX items in your navigation”, and so on) fails by nature to take into account the context of the interaction, and should be treated with skepticism.
The origin of line length research
So this conversation is what led me back into the murky world of line-lengths. Upon closer inspection, some of the relevance of the advice came in to question. The Baymard article was first published in 2010, before responsive design became mainstream. In particular, it highlighted ‘Typographie: A Manual on Design‘ by Emil Ruder as a key source.
First published in 1982, this textbook helped generations of typographers and graphic designers learn their fundamentals, but was designed for a world of fixed-sized characters, printed on fixed-size media.
A lot has changed in the ways we display and consume content. It seems the Baymard article was updated in 2014 to reflect some of these developments:
With the advent of media queries, semi-fluid layouts are now possible and can give you the best of both worlds: a fluid layout that adapts to the reader’s screen, while still retaining sufficient control over the width of text blocks to ensure optimal line lengths
This lip service to one of the most important evolutions in modern design acknowledges the fact that there are other approaches, but doesn’t really do much to ponder the actual impact, namely:
- Browsers can be resized for comfortable consumption of content
- Browsers also provide ways for users to change the appearance of the text they see – not only for accessibility reasons (e.g. to account for visual impairment) but also for comfort (e.g. making text larger or smaller, or changing contrast)
- Line length is only really an issue on larger screen sizes, where a default can be set (but not guaranteed)
What this really means is that, although designers can set a default appearance and design around this, the user can change the layout of a responsive website to suit them, meaning that the concept of a fixed CPL is almost meaningless, especially on smaller devices.
WCAG2.1 even acknowledges this to a degree, specifying that for optimum accessibility, text size should be defined in rem, with 1rem being equal to 16px by default (although this is also changeable by the user). The thought being that when users resize text, all other elements such as headings, etc resize proportionally to the base text.
A user making text larger within a fixed-width container means fewer Characters Per Line (CPL).
Nostalgia and layout
A confusing design trend has also become prevalent in recent months, most probably from graphic designers who aren’t incentivised to put too much thought into how users will interact with their layouts:
Multi-column text layouts herald from the days of print. A time when your canvas was a fixed piece of real estate that had to be well-utilised for cost purposes and practical to carry around. One long article had to span a large width rather than being ridiculously long. Hence multiple columns on the same page to preserve readability.
This is in complete contrast to the way in which the majority of people now find the continuation of the content they are reading – by scrolling vertically. There’s no limit on the amount of ‘space’ a webpage can take up. More than half of global web traffic is now mobile, and the default behaviour for casual browsing on mobile has been observed making its way back to desktop as an expectation.
The multi-column approach may look pretty and lend a sense of design elegance from the world of glossy magazines, but scrolling to the bottom of a layout only to have to scroll to the top to read the next word isn’t just impractical, it’s maddening. It goes against the very point of having text on a website – that people will easily read it, retain its key points and hopefully take action.
It’s become apparent from going down this rabbit hole that there hasn’t been any high-profile, substantive research or study on the topic since the 80s, and the industry as a whole is passing around an article from 2010 (that relies on a book from 1982!) as best practice.
If there is any more up-to-date research on this topic, we’d gratefully read it, but in the meantime, our recommendation on CPL will be the same as our other UX recommendations – appropriate to the context.
