Designing Text for the People Who Read It

This article was written in collaboration with Kenichi Yoneda, Ben Lucas, and Julia Feldman. Illustrations by Liz Xiong.

As a long-time wearer of glasses and contacts, I’ve been familiar with the chart shown below from a pretty young age. If you’ve never taken an eye exam with one of these, it generally goes something like this: first, the eye doctor would have you sit across the room from this chart. You would be asked to cover one eye and then read each line, from top to bottom, until you couldn’t make out the letters anymore. After one eye, you would test the other. The lowest line you could read in this chart with either eye would provide you with a measure of your visual acuity. In the US, this is commonly expressed as a fraction like 20/20, 20/40, etc. A nice high level overview of this process is available in this (very brief!) presentation from the National Institute of Health: Testing distance vision using a Snellen chart [1].

Figure 1: Snellen chart. Image source: https://commons.wikimedia.org/wiki/File:Snellen_chart.svg. This file is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license.

There are two points to call out here. First, the size of the chart matters. If the characters are giant, your ability to read the text will understandably be impacted. Second, your distance from the chart matters. Both of these may seem obvious, but they’re worth pointing out because if you want to measure visual acuity you’ll have to control for both at the same time. The reason for this is all boils down to our first observation – visual acuity is a measure of an angle over a distance.

Observation #1: Visual acuity is a measure of an angle over a distance

Or, if we want to be more precise, we can consult The Organization of the Retina and Visual System [2]: “visual acuity is the spatial resolving capacity of the visual system. This may be thought of as the ability of the eye to see fine detail.” Generally, as the subtended angle (you can think of this as the distance your eye travels to see from the top to the bottom of an object) required to observe any specific artifact decreases – for example, when the artifact moves away from the observer — the amount of visual acuity required to distinguish characteristics of that artifact increases.

An example might make this more concrete. Consider the image below, where a specific artifact (in this image, a banana, for scale) is perceived by a viewer at two different distances.

Figure 2: Illustrating how the angle required to perceive this object changes as a function of distance. Image source for the bananas: http://www.freestockphotos.biz/stockphoto/15909. This image is licensed under Public Domain. Released to the Public Domain by its author.

In the top image, the distance between viewer and object is denoted by d1, the angle subtended by that object is a1, and the height of that object is denoted by h. In the bottom image, the distance is d2, the angle is a2, and the actual height of the object is (still) h (although the perceived height of the object is of course smaller, but more on that below).

We can take away two main points from this illustration (I mean, we could probably take away more than that, of course, or learn a lot about bananas. But for the sake of this article we’ll limit to two). First, the relationship between distance ( d) and perceived height is proportional. Anytime you double the distance between an observer and an object, the perceived height of that object drops by half. In the example above, this can be seen in that the perceived height of bananas on the lower half of the image would be about half the perceived height of the bananas on top, even though (from an outsider's perspective) the actual height of the bananas doesn’t change (of course).

Second, the relationship between angle (a) and perceived height is also proportional. Again, in the example above this could be seen from the fact that the perceived height of the lower image (e.g., how large the bananas appear to an observer from farther away) will subtend half the angle compared to the bananas on the top image, that are half as far away.

You can test this really easily with just a couple of post-it notes. All you have to do is:

Step 1: Place one post-it note on the wall, folded so that half the post-it note is sticking out from the wall.

Step 2: About an arms-width away from that first post-it note, place two more, one directly above the other, both folded so that they stick out from the wall.

Step 3: Place your head about an arms-width in the other direction from the first post-it note.

When you’re done, it should look like Figure 3 below. The stacked post-its at right, at exactly twice the distance, will appear to be exactly the same height as the single post-it closer to you.

Figure 3: Illustrating how if you double the distance between you and an object, you need to double the actual height of that object to match the perceived height. Grab some post-it’s and give it a try! Image source: The image above was created in Google Presentations by the author for use in this article

“But what does this have to do with visual acuity!?” you may ask. And rightly so! Thank you for keeping me on track. As stated above, visual acuity refers to the ability to resolve detail at a given angle, where that angle can be a function of the size of an object or it’s distance from the observer. In our examples above, resolving detail may mean the ability to differentiate one post-it from two, stacked on top of one another (i.e., Figure 3) or one banana from a bunch of bananas (for instance, in Figure 2). It’s like seeing the proverbial forest for the trees, but in this case it’s not proverbial and it’s backwards – we really are talking about the ability to differentiate trees in the forest. Similarly, for most eye tests, resolving detail means resolving the characteristics of letters – for instance, the individual strokes that make up an uppercase “E”.

Once again quoting The Organization of the Retina and Visual System [2], “Visual Acuity (VA) in Snellen notation is given by the relation: VA = D’/D where D’ is the standard viewing distance (usually 6 metres) and D is the distance at which each letter of this line subtends 5 minutes of arc (each stroke of the letter subtending 1 minute; figure 4).”

Figure 4: Illustrating how we can arrive at a Snellen fraction (e.g., 20/20) given the ability to resolve detail (the features of the “E”) at a specific distance (subtending 5 minutes of arc, or 5/60ths of a degree). Image source: This image is from a publicly accessible blog post, linked at [2]. License unknown.

Ultimately this means that it’s possible to estimate the visual acuity of any individual given their ability to identify features of an object at a known size or distance. Of course, we already know this in general (that’s what a vision test is all about, after all!), but the detail provided here sets us up for Observation #2.

Observation #2: Text can be scaled over multiple distances

The prior observation really boils down to two main things. First, one way to understand how we perceive objects is by measuring the angle it takes to subtend that object. If you move the object farther away from the observer, the angle decreases as the perceived size of the object also decreases. The math involved here is probably already familiar to you if you remember high school trigonometry (oh, those happy days!), but don’t worry if you don’t remember – we’ll cover what you need to know next. And second, that visual acuity (generally speaking) is a metric that describes how any individual perceives objects that subtend a specific angle.

What this means, however, is that we can scale content to be perceived as any size, given any distance. For a concrete example, imagine you’re looking at a menu at a coffee shop. You can clearly see the line for what you want to order –

Everything bagel with cream cheese

(I’m in New York, after all, and a good everything bagel with cream cheese is hard to top). Let’s say that the text on the menu is 14pt Roboto. This is equivalent to a real text size of about 4.94mm.

As introduced above, the angle required to perceive that line on the menu depends on two things – the size of the actual text, and its distance from you. For the sake of this example, let’s say that the text is 35cm away from you (which also happens to be a decent estimate for the average distance most people hold their phones away from their faces, by the way). We can calculate the angle required to subtend that line at that distance with the following:

arad = 2 * arctan( h / d*2 )

Where arad is the angle (in radians) that the text subtends, h is the height of that text, and d is the distance it is being viewed from. Plugging in the values we have from above, we get:

arad = 2 * arctan( 4.94 / 350*2 )

arad = .0141

If degrees are more familiar, we can convert radians to degrees with:

adeg = arad * ( 180.0 / 𝛑 )

By plugging in our numbers, we end up getting a value of 0.8086°. Which is pretty cool, right? With just a couple equations, we’ve shown you how to identify the angle that text subtends (the distance your eye must travel to perceive the text top to bottom) – not just at one distance, but at any distance (just replace the 350 above, the distance in mm between viewer and object, with any other distance).

We’ll wrap this section up by answering two more questions to show what you can do with the above information (and again, to just show how cool all this stuff is). First, what if instead of holding the menu 35cm away as in the example above, it was on a stand 100cm away from you. Specifically, how big should the text be to require the same angle to subtend?

The equation for this is pretty simple:

h = tan(arad) * d

Where h is the height, arad is the angle in radians (that we calculated above), and d is the distance that we want to calculate for. Plugging in our new numbers, we get (note that distance is in mm):

h = tan(.0141) * 1000

h = 14.11

Which means, if the text were 100cm away from you instead of 35cm, to maintain the same angular height that text would have to be 14.11mm tall. This is definitely something worth keeping in mind if you’re designing a menu that may be read from multiple distances (or, you know, if you’re designing products intended to be viewed on multiple devices)!

And second, if the text size wasn’t increased like above, what would the perceived height of that text be?

We can get this value with:

hperceived = ( h / d ) * dbase

Where hperceived is the perceived height, h is the actual height, d is the new distance, and dbase is the baseline distance – in our case, 35cm, or 350mm. Plugging in the values, we get:

hperceived = ( 4.94 / 1000 ) * 350

hperceived = 1.729mm

Which means, if the text were 100cm away from you instead of 35cm and the text size wasn’t increased accordingly (i.e., holding the actual size constant rather than the angle), the perceived size of the text would be about 1.729mm. Which is noticeably smaller than the original 4.94mm text size!

We’ll wrap up this section with a hopefully straightforward recommendation: when you’re designing for multiple distances (or unknown distances), you’d do well to consider the user experience at each of them. Hopefully, some of what I shared above will allow you to do that a little bit easier.

Observation #3: Text size can be expressed as a measure of visual acuity

If you’ve managed to stick with me this far, well done! But before we wrap up I wanted to share one last observation that builds on the first two that may allow you to express or understand text sizes in a slightly new way. Specifically, by being sensitive to things like expected viewing distance (e.g., Observation 2) and how visual acuity is understood and calculated (e.g., Observation 1), we can express text size as a measure of visual acuity.

To make this concrete, let’s revisit the example from above – you are once again standing in line at your favorite bakery, holding the menu in front of you. For the sake of clarity and continuity, let’s again say that the menu is about 35cm away from your eyes. But this time, instead of describing the text in terms of its size (i.e., 14pt Roboto, or about 4.94mm tall) we can describe it in terms of the visual acuity required to be able to reasonably distinguish the characteristics of that text.

Which means that instead of describing text as 14pt, or 4.94mm tall, we can state that this text, viewed from 35cm away, is about 20/190. Meaning that if any viewer has a visual acuity of 20/190 or better, they should technically be able to read that text at that distance. Again, recall that 20/190 is a Snellen fraction – similar to the familiar 20/20 that’s typically considered “perfect” vision.

Note, though, that technically being legible is not the same as being readable – or even providing a good reading experience. We want to be clear: our goal is to give you a new way to think about text size that's more sensitive to the people who will be reading it. This includes being explicitly sensitive both to how close or far away your readers are from the text, as well as designing for readers who are low-vision or visually impaired. We are not suggesting that these are ideal minimum text sizes.

Before we move on and show you exactly how the Snellen fraction is calculated, consider a couple opportunities that expressing text size in this way opens up for us. First, it positions text size as a far more user-centric metric, where both expected viewing distance (e.g., context) as well as the viewer’s visual acuity (e.g., user characteristics) must be taken into consideration from the very beginning. Second, it allows us to describe text size in a way that is potentially more familiar, or more intuitive, than through absolute measures. For instance, calling any text “14pt Roboto” is probably super clear to designers and those that love them, but to the average person what “14pt Roboto” looks like in practice may not be immediately apparent. On the other hand, however, if you describe text as “20/80,” meaning that anyone with 20/80 vision or greater (or corrected to 20/80 vision or greater with glasses/contacts) should be able to read that text.

Which is, again, super cool, right?! I mean, I do this for a living but I still think it’s pretty neat.

With that out of the way, there’s only one last thing to cover: given a text height and an expected or average viewing distance, how can we express that text size as a measure of visual acuity? We can do that with the following equation:

sdenominator = ( h / tan( radians( 5/60° ) ) ) * ( 20 / d )

Where sdenominator is the denominator of the Snellen fraction (the numerator will always be 20). This one is a bit more complicated, so let’s unpack it.

As mentioned above, the visual acuity in Snellen notation is given by the relation VA = D’/D, where D’ is the viewing distance and D is the distance at which each the size of the text subtends 5 minutes of arc. The first part of the equation above – ( h / tan( radians( 5/60° ) ) ) – allows us to compute that distance (again, refer to [2] for more details on this). At this point, you have a Snellen equivalent, where the numerator is our actual distance and the denominator is the value you’ve computed so far. To express this value in the more familiar Snellen notation (where the numerator is “20”) we just need to multiply the computed value by 20 / d, where d is the expected viewing distance.

And that’s it! Easy peasy, right?! To make sure this makes sense, let’s walk through it one last time with a concrete example. If we return to our scenario above (we’re still waiting in line at the bakery) and the menu text is 8pt Roboto (which is 2.82mm, rather than the 14pt size that we calculated above), how large is the text expressed as a measure of visual acuity, for an expected viewing distance of 35cm? We can solve that by plugging our values into the equation above:

sdenominator = ( 2.82 / tan( radians( 5/60° ) ) ) * ( 20 / 350 )

sdenominator = ( 1938.89 ) * ( 20 / 350 )

sdenominator = 110.79

Which means, if we’re looking at 8pt Roboto text at 35m away, we would need to have about 20/110 visual acuity or better (either normal or corrected to normal) to read that text. Which is a fair bit different from the 20/190 visual acuity that was required to read the 14pt Roboto as shown above.

Before we wrap up, let’s answer one last question (we’re almost done!). Let’s say you're standing in line at the same bakery, but instead of holding the menu about 35cm away from your eyes, it’s again on a physical stand on the counter. The question now is, how close would you need to be to read the menu if you had 20/40 visual acuity? And 20/40 was not chosen arbitrarily here – in the state of New York, 20/40 is what’s required by the DMV to be able to apply for or renew a drivers’ license [3]. Let’s say the text is again 14pt Roboto, 4.94mm tall – plugging in the values to the equation above, but instead solving for d rather than sdenominator, we get:

40 = ( 4.94 / tan( radians( 5/60° ) ) ) * ( 20 / d )

40 = ( 3396.49 ) * ( 20 / d )

40d = 67929.8

d = 1698.25

“Woah,” you may be thinking, “that seems like a long ways away!” But remember our units are mm here, so how we can interpret this is: In order to read the menu at the bakery, where the text is 14pt Roboto, or 4.94mm tall, a person with 20/40 vision would need to be within 1698mm (or 169cm) of that sign. Which, for the Americans among us, is about 5.6 feet.

Conclusion

And that’s it! Thank you for reading through all this. If you have any comments or corrections, I’d love to hear them – feel free to reach out on Twitter by tagging @MaterialDesign.

It’s also worth noting that we’ve identified some interesting cases where scaling text height by angular height alone may not be necessary – but that discussion is beyond the scope of this article. I’ll write that up separately and share with you all later.

Until then, thanks again!

Cited

[1] Sue, S. (2007). Test distance vision using a Snellen chart. In Community Eye Health, 20(63): 52. Retrieved from https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2040251/ 02/2020.

[2] Kalloniatis, M., Luu, C. (2007). Visual Acuity. In Webvision: The Organization of the Retina and Visual System. Retrieved from https://webvision.med.utah.edu/book/part-viii-psychophysics-of-vision/visual-acuity/ 02/2020.

[3] Vision requirements & restrictions. Retrieved from https://dmv.ny.gov/driver-license/vision-requirements-restrictions 02/2020.