Introduction
Desktop monitors are big and getting bigger…
The average desktop monitor size in 2008 was 19 inches, 22 inches in 2012 and today it’s around 27 inches with even larger monitors cheap and readily available.
Naturally this is driven by demand, and the need for a more usable workspace is foremost amongst these demands. We want lots of windows open, we need to see documents side by side, when we view pictures and videos we want them BIG and we don’t want to strain our eyes.
The benefits of larger monitors
Studies have shown that people are more productive when they use larger monitors. This is because they can work more efficiently and they are less likely to make mistakes. This is certainly true for my work as an interaction designer. Other studies suggest that the productivity benefits of larger monitors exceed those of procuring more powerful machines. Either way… you (or your employer) get your money’s worth.
So we have more digital real estate, which is great, but too much of a good thing can be bad…
I want to talk about how capitalising on our increasing monitor real estate can negatively affect the readability of text and offer some guidance on how to avoid this.
A4 paper: A case study of function dictating form
The history
The A4 standard was established in Germany in the 1920s and by 1975 was established as an ISO standard and the official United Nations document format. Today, nearly all nations have adopted the size except the USA, Canada and most of South America who use similarish ‘letter’ and ‘legal’ sizing. The ‘A’ standard follows a number of principles that design nerds will find particularly gratifying.
In the ‘A’ standard, smaller paper sizes are exactly half the previous paper size every time. This means they are exactly the same shape from one size to the next, with a consistent width-to-height ratio. Not only that but A0 is exactly 1m2 of paper (measuring in at 84.1cm x 118.9cm). *mops brow, loosens collar*
It’s no accident that A4 is our go-to size for everyday printed presentation of text. Aside from the sexy ratio stuff, there are ergonomic, readability and cognitive factors at play.
Ergonomics and readability
A4 feels good in the hand and retains enough rigidity at that size to not become a billowing sail, but perhaps more importantly the format has evolved to offer a comfortable and effective reading experience.
First things first, fonts need to be big enough (for my tired old eyes) to read and small enough to be space efficient as paper is expensive. From Gutenberg onwards, the 12 point font size has established itself as the happy medium. But reading is more complicated than just being able to SEE the letters…
There are cognitive implications for word counts per row of text
Our eyes don’t read character by character or even word by word. Rather, our eyes scan a line of text by pausing momentarily to process a group of 3 or 4 words then move on to the next. This is called a saccade. Humans process text less efficiently beyond 3 or 4 such saccades, so for optimum print readability a rule of 12 words per row has been suggested by folk such as Robert Bringhurst in “The Elements of Typographic Style”. It’s suggested this number decreases slightly for less proficient readers and increases for the more proficient.
12 words per row does seem a little cautious perhaps. On A4 you could achieve this with a 14 point font size which butts up against the ‘cost effective’ issue; you’re getting fewer, bigger words per page.
In practice, deviating from a sensible ‘words per row’ principle can generate all sorts of readability concerns. Even if they can read it, too many words per row and a reader can easily get lost when going from the end of one long line to the beginning of the next, and may inadvertently re-read the same line or even miss a line or two. Fewer words per row can result in too many hyphenations or weird justification gaps producing broken, difficult to read paragraphs.
Digital text
What can digital learn from print?
For digital, the established recommendations are a little more generous than those offered by Bringhurst and others, ‘Words per row’ principles still apply of course as there are cognitive limitations at play, but WCAG (The internationally recognised ‘Web Content Accessibility Guidelines’) recommends 16 words per line or 4 to 5 chunky saccades.
We’ve established that 12 point fonts are generally considered civilised for printed text and happily, WCAG recommends a minimum digital font size of 16 pixels which translates to 12 point in old print money; a nice point of symmetry.
On your screen, 16 or so words at this recommended font size would occupy a horizontal space very similar to an A4 page and of course this is not a coincidence…. It’s a centuries-long negotiation between many competing factors resulting in a reading format that just works well.
Hang on though… hold up a piece of A4 against your big ol’ monitor. I can get three side by side. What a waste of space! Can we use up our acres of monitor real estate by making our body fonts bigger? That has to make it more readable, right?
WRONG.
Larger does not mean more readable
Context is important here as there are different reading experiences. Sitting on your sofa reading Netflix blurbs on your big telly is very different from reading text on a desktop or laptop, and that’s largely what I’m talking about here.
Perhaps counter intuitively, when you’re directly in front of your laptop screen larger does not necessarily mean more readable. Beyond a certain point, larger font sizes, even when they maintain a sensible ‘words per row’ principle, are much W-I-D-E-R on screen than the A4 standard we’ve produced for ourselves. This can reduce reading speed as your eye can process fewer words in a single saccade, making reading more mechanically taxing. 18 pixels is considered good practice for large, legible body text. Keep your bigger fonts for headings.
In practice
Digitally then, we have an established, comfortable font size (16 to 18 pixels) AND an optimum word count per row (16). This SHOULD be the basis of a strong design principle that results in text block widths that look and feel similar-ish to A4 portrait.
This principle is often broken though, and whenever I see this, it just feels plain WRONG.
Check out this ironic 30+ words per row, 14 pixel font example:
Font size aside, this example is the result of greedy responsive page templates gobbling up all the available horizontal real estate and could have been remedied by applying a more judicious maximum width to either the main content column or the page itself. Sure you might have to scroll a bit more, but it’d be easier to read and readability and accessibility are more important than getting stuff above the page fold.
A good example now… The BBC news gang feel no need to occupy all the available real estate, observing a sensible words-per-row principle and a good 16 pixel font size.
To summarise
You want people to read your stuff. People want to read your stuff. Let’s make it easy to do so.
Reading on paper has been around a lot longer than reading on screens and has evolved to be sensitive to our cognitive peccadillos and visual vagaries. It would seem sensible for digital to adopt these Darwinian adaptations and provide a familiar, comfortable reading experience and not be tempted by the white space afforded by our humongous monitors.
Stay tuned for my upcoming old-man blog posts ‘Your website is too damn big’ and ‘Stop animating everything, it’s giving me vertigo’.
Need help?
Want to understand your website better?
If you would like to talk about how we can support you in gaining a deeper understanding of your audience so you can make evidence-driven design decisions, we’d love to talk. Contact us.
Related Posts
