Colouring-in Team

What minimum text size should be used on the web?

If you work in digital design you probably have some sort of answer in mind. Maybe you have a preferred size for readability, and a lower limit you won't drop below. Perhaps you remember the WCAG guidelines. Whatever your answer, the next question is probably more tricky: why?

With the range of screen sizes and resolutions currently available, not to mention the variation in the way we use devices, it is becoming increasingly hard to know exactly what is a sensible minimum, or a comfortable size for reading. In this post I will attempt to explain what 'legibility' means, technically, and how this can help you make better decisions about text size.

“Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without a purpose.” - Emil Ruder

How good is your eyesight?

One way of describing the sharpness of eyesight is with the 'Snelllen scale'. As I understand it, this is actually somewhat old-fashioned these days, but for the purposes of this explanation it is ideal. You're probably already familiar with this measurement: normal eyesight is described as "twenty-twenty" (20/20).

So what does that mean? On the right is a Snellen Chart, a method of measuring visual acuity developed in 1862 by Dutch ophthalmologist Herman Snellen. A descendant of this chart is still used today. The smallest line of characters that a person with so-called 'normal' vision can read at a distance of 20 feet is the 20/20 line. If a person is said to have 20/40 vision, they can just about read at 20 feet what can normally be read at 40 feet. And likewise if you were lucky enough to have 20/10 vision it would mean you could read at 20 feet what others could only read at 10 feet.

Technically, whether or not something is legible is all down to the angle the character being viewed makes with the eye. That is, it is the perceived size that is crucial, not the physical size. Small-print on the back of a form held a few inches from your face may be easier to read than giant words on a billboard a few hundred metres away. You can visualise it like this:

It is a simple matter of either trigonometry or common-sense to demonstrate that the relationship between the distance and the character-height is linear, meaning that you can maintain the same angle at twice the distance by doubling the character-height.

It's all about angles

Going back to that definition of normal eyesight, the angle those characters on the 20/20 line make with the eye at a distance of 20 feet is 5 minutes of arc, a minute of arc being one sixtieth of a degree.

The characters that form the chart are actually very interesting. They are known as 'optotypes', and they have some important characteristics. Firstly, the width of the lines is the same as the the width of the spaces. Secondly, the width and height of each character is five times that line-width.

What this means in practice is that when a person is able to discern an optotype that makes an angle of 5 minutes of arc with their eye, that in turn means they can "resolve a spatial pattern separated by a visual angle of one minute of arc". If that sounds confusing, look at the capital E. To read it you must be able to differentiate three horizontal bars and two spaces: five elements in total.

Note that although these definitions reference distance vision, the actual measurement of visual performance is not related to a particular prescription for lenses. Factors beyond myopia or hyperopia can affect a person's ability to resolve a sharp image, including astigmatism, problems with the shape of the eyeball or cornea, and even neural problems. It is, however, a measurement only concerned with central vision, and not peripheral vision.

Some vision trivia...

• About 35% of adults have natural 20/20 vision, rising to about 75% with the use of corrective lenses or surgery. [source: UIHealthcare.org]
  
• Many people have better than 20/20 vision. In 1999 Tiger Woods had laser eye surgery, which is said to have given him 20/15 vision. After the surgery he won seven of his next ten events. [source: Independent.co.uk]
• Here in the UK, the DVLA require you to read a 79mm number-plate character at a distance of 20 metres in order to obtain a driving licence. This equates to just 20/54 vision.
• There is a separate DVLA requirement for visual acuity of 'decimal 0.5' (after correctives). This is just 20/40 vision, and may go some way to explaining the quality of driving here in Bristol.

Easy to read?

There is a crucial difference between text being legible and actually being easy to read. To say that something is legible is simply to say that the reader can discern what the characters are. But for something to be easy-to-read it must be larger. And of course there are other typographic factors that I shan't cover here, such as line-length, leading, typeface and so forth. There are many excellent blog posts on this subject.

Many studies have looked at at what constitutes easily-readable text. The ANSI calls for a minimum of 16 minutes of arc, and British Standard BS EN ISO 29241-3, ("Requirements for Office Work with Visual Display Terminals”) also uses 16 minutes of arc as the boundary for easily readable text. Interestingly, the apparent radius of the sun at the horizon is also 16 minutes of arc. I expect this is just coincidence, but it is interesting that there is a commonality between human visual acuity and probably the only object that has been a constant size throughout our evolution.

Text on Digital

So what affects the legibility (and by extension, readability) of text on the web? We know that this is a question of the physical size of the text and the distance of the eye from the screen. So what we really want to ask is: what affects the physical size of text on a screen? And here a number of factors come into play. Clearly the specified text size is the major factor, but perhaps less obviously there is also the pixel density of the screen, and the typeface itself.

Pixel density

Pixel density has become a significant variable in digital design only relatively recently. If you're not sure exactly what I'm talking about, pixel density is simply the number of 'dots per inch' on a screen. To illustrate, a laptop with a 1280 x 800 pixel 13 inch screen has a much lower pixel density than a 5-inch-screened smartphone of the same resolution. For reference, a pretty standard HD resolution 24 inch PC monitor has a pixel density of about 94 pixels per inch (PPI), whereas a 'Retina' screened Macbook on the other hand has around 225ppi.

Unfortunately the complexity doesn't stop there, as it is also necessary to think about device-pixel-ratios. This is to contend with the fact that many newer mobile devices are so pixel-dense that they have to 'pretend' to have lower resolution screens in order to ensure that web pages display at a size that is readable.

Interestingly, 20/20 vision should allow a person to recognise a 1 pixel pattern on a 290ppi screen held 30cm from the face. What this means is that many of us are are already using smartphone screens that exceed the capabilities of the human eye in normal use, with density values exceeding 300ppi becoming more and more common. If you've ever worked in print design, this number might seem incredible: there are now phone screens that exceed the standard quality measure for print.

Typefaces

When we talk about the physical size of text rendered on a screen, one of the things that is commonly overlooked is the differences between typefaces. Below is the letter E, set in a variety of typefaces. But each 'E' is exactly the same font size. As you can see, some fonts produce a letter E twice the height of others.

Doing the sums

So, how can you work out if the text you've put on a website will be legible? If you know the height of your capital E in pixels, then the pixel-density of the screen multiplied by the pixel-ratio should enable you to work out the physical height of the character. We can estimate the distance of the eye from the screen if we know the most likely usage for any given type of screen (i.e. handheld, sat at a desk etc). Combining these means we now know two sides of a right-angled triangle, and so we can calculate the angle made with the eye.

If all of that seems too complicated, have a look at this diagram:

If you can remember a little of your school trigonometry, you might recall that the tangent of an angle is equal to the opposite divided by the adjacent. So....

tan δ = opposite divided by adjacent = b / 2a

To save you the trouble of doing this yourself, I've made a handy little tool to do the job for you.

About contrast

Clearly contrast of text against a background has an enormous impact on how readable it is. Understanding (and attempting to model) the impact of this will be the subject of the next post on this blog. I have written a tool which attempts to check typography for legibility both in terms of size and contrast, and I hope to share that next time, too.

Final word

Legibility is of course only one factor in making text useful and valuable. I can't really say it any better than David Carson: “Don't mistake legibility for communication”