I recently found a fun visualization tool, SizeCalc.com, that shows you the perceived size of an object based on your viewing distance. It started me thinking… we have rules of thumb for how large text on a website should be for easy reading, but are they valid? Are they based on the science of human vision and anatomy? What about different size laptop, desktop and phone screens?
What’s the best font size?
Picking a font size for the web used to be really easy. 16 points and you’re done. You could feel confident that your content would be decently readable on PC or Mac, Netscape or IE.
Man, have times changed. Thanks to responsive design, your web page might be read on a 4“ screen held in the hand, or on a 60” screen ten feet away from the couch. You can’t even count on that screen staying the same way up—it might be upright like a book page one moment, then laying longways the next, enlarging your text without asking.
Science to the rescue!
Conveniently enough, vision is a topic of intense scientific interest. A few years ago, a psychologist and a media researcher teamed up to review findings from vision science and typography to find out how text size affects reading speed and comprehension.  
They found that reading speed is fastest when the text’s x-height is 0.3 degrees of arc.
The “x-height critical size” of text—in other words, the minimum size—is about 4.5 points at 16″, or about 0.2° of visual arc, for readers with 20/20 vision. For older readers, this increases to 0.3° (~6 pts); for those with much older and less flexible eyes, it rises to as much as 1.0° (~20 pts).
But wait!, you say. What’s x-height? Degrees of arc? I thought we were talking about font sizes!
You’re right. We have to take a detour to figure out how to apply “x-height is 0.3 degrees” to your web font size. Actually, several detours. Grab your map and let’s go.
Detour #1: We’re measuring in degrees now?
Athough we specify text size in points…
…we measure visual acuity by how much of your field of view an object takes up:
That field of view, or visual arc, is a factor of the distance from the object and the object’s height. The smaller the arc, the harder it is to see details. To evaluate a font’s minimum readable size, we need to know how far away it is, and how big the font’s letters are. Apply some basic trigonometry and you have your measurement.
Detour #2: Fonts are not all alike
Depending on its design, a typeface may have tall lower case letters, or maybe very short ones. The distance from the baseline to the top of a lower-case x is called the x-height. And this can vary dramatically from typeface to typeface:
What you really care about is this: Large x-heights are more readable. (This is why you’ll notice that most newer type designs, such as Helvetica and Segoe, tend to have larger x-heights, compared to old designs, such as Caslon, Garamond and Goudy Old Style.)
Detour #3: Points aren’t pixels
When you specify a font size, you use points. Points are a physical unit of measurement. There are always 72 points per inch. Never more or less. But the size of a pixel—the smallest unit of an image a screen can create—varies by a screen’s physical size and its resolution.
Because your typical PC has no idea how large its display is, it just assumes the screen is 96ppi (a value picked sometime back in the 90s). To get from points to pixels, it multiplies by 1⅓.
And yet, this assumption is almost never correct. Which brings us to…
Detour #4: Screens are really not all alike
The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.
Even within a single device class there will be a lot of variation. Here’s a sample of screens around imarc:
|Screens around our office||Physical Size||ppi|
|Powwow Conf. Room HDTV||60″||37 ppi|
|Robert's 30″ Dell||30″||101 ppi|
|Jeff's 27″ Apple||27″||109 ppi|
|Allison's 24″ Dell (1080p)||24″||92 ppi|
|Cheap 21″ Dell (1080p)||21″||105 ppi|
|Kevin's ThinkPad||14″||131 ppi|
|Nick's Macbook Pro||13″||113 ppi|
|Robert's MacBook Air||11″||135 ppi|
Phones are just over the place — I’ve seen values from 167ppi to well over 400ppi. But, most mobile browsers pretend they’re rendering at 167ppi (even when the real screen is sharper), the resolution of the original iPhone in 2007. We can use that to keep our calculations simple, even if not perfectly accurate.
Detour #5: Don’t Retina screens help things?
Probably. The research we consulted earlier is for images on paper, not on screen. Type on paper is sharp, offers good but not dazzling contrast, and doesn't emit light directly at your eyes. Most screens are not as sharp as that, and they are sources of glare to the eyes.
Still, a high-DPI or “Retina” screen is going to offer a far better image for the eye than traditional screens. We probably can assume that the research findings are accurate for devices such as the MacBook Pro, Surface Book, Chromebook Pixel, and "Retina" iPads, phones and tablets.
This may not be the case for lower-resolution screens. My hunch is that traditional Mac/PC displays, with their larger, chunkier pixels, require slightly larger text to compensate for less precisely formed letters. I haven’t found research into this specific area though, so I can’t factor this into our calculations.
How do I apply this?
Now let’s integrate the factors to determine the minimum font size for readability:
- x-height of chosen font
- degrees of visual arc
- virtual pixels to physical points
- screen density in ppi
Let’s say we are using Times New Roman at 16 points. It has an x-height of 45%; Windows assumes a 96ppi screen, it’s viewed from 16 inches away (a typical distance), on Kevin’s ThinkPad Carbon. The perceived x-height is 0.26°. That’s a comfortable size.
Walking through that:
16.0 font size in points x 0.45 x-height ratio x 96/131 ppi factor: OS (96) vs reality (131 on Kevin's ThinkPad) -------- ----------------------------- 5.28 x-height in physical points
5.28 x-height in physical points 1152 distance in points (16" x 72) -------- ------------------------------ 0.26 arctangent, in degrees
But math is hard!
To take the pain out of this, here’s a calculator:
Here are some common x-heights you can try, courtesy of Jukka Korpela’s x-height tool:
|Arial Unicode MS||0.518|
|Comics Sans MS||0.532|
|Times New Roman||0.448|
Now we can run through some scenarios quickly and easily.
How small can we go?
What happens if we set Times New Roman at 12 points, instead? You get an x-height of 3.96pts, which at 16″ away is 0.20° … that’s just on the edge of readable for those with 20/20 vision, and too small for many. Don’t go any smaller for body text. Or you could switch out Times New Roman for Tahoma, whose taller lower case letters make a big difference: 0.32°.
Working at our desks
Let’s step over to Allison’s 24″, 1080p screen. That same 16pt text an x-height of 7.51pt and an arc of 0.37°. That’s pretty big. But wait—Allison doesn’t sit 16” away. Her eyes are 22″ from the screen. (I measured.) That 16pt font’s perceived x-height is actually 0.27°. Still nice and generous, so we’re good to go.
Then there’s Jeff. He sits really far back from his screen: His eyes are 32″ away from his 27″ Apple display. The visual angle of 16pt Times New Roman’s x-height is just 0.16°. When text gets this small, research shows a rapid fall-off in reading speeds. (Except for Jeff, I guess.)
The TV experience
Lastly, let’s look at the 60″ HDTV in our main conference room. It’s 141″ from screen to to the mid-point of the table. That 16pt font clocks in at 0.11°, half the size it should be! If you’re designing for that 12-foot distance, you’ll want to at least double your text size.
Let’s get practical
Web design is necessarily pragmatic; we don’t always get to know our what our visitors’ environment and technology are. Let’s gather some data and work with some averages.
I ran around our Amesbury office with a ruler, measuring the screen-to-eye distance of our team working at their desks, laptops, and using phones. I found:
- Our eyes average 23″ from the screen at our desks, and about 14″ when using a laptop.
- The average imarc desktop screen is 104ppi, and the average imarc laptop is 121ppi.
- Most of us hold a phone 14″ from our eyes when reading a text message, though this varies quite heavily.
Let’s calculate the minimum, middle and larger font sizes for Times New Roman and Arial on those various devices. Our goal is to ensure there is no type with x-height smaller than 0.2°, preferably 0.25° (middle) to 0.3° (larger).
|104ppi at 23″||Times||Arial|
|121ppi at 14″||Times||Arial|
|167 nominal ppi at 14″||Times||Arial|
60″ Flatty (HDTV)
|37ppi at 140″||Times||Arial|
We can be reasonably confident that even a low–x-height typeface like Times New Roman will be readable on most devices if you set it to least 14 points tall, but 18pt is a better choice if your design accommodates it. If you use a more readable face such as Arial, 12pt is a good minimum, with 15pt being pretty much ideal.
The good news is that our old rule of thumb—start at 16pt—is still a pretty good one, at least for users on laptops, desktops and phones. But if you are designing for a conference room PC, no text should ever be smaller than 26pt Arial, and most text should be at least 33pt.
But you don’t need that old rule of thumb. You now have the tools to calculate the ideal font size for any typeface, for any user, on any device.
Looking for more best practices?
Footnotes and further reading
Does Print Size Matter for Reading? A Review of Findings from Vision Science and Typography, Gordon E. Legge; Charles A. Bigelow. Journal of Vision August 2011, Vol.11, 8. doi:10.1167/11.5.8. ↩
As my freshman science advisor told me, “Unanswered questions raised by your research are how you get funding for your next project.” ↩