Imarc

What’s the best font size for the web? Well, it depends… Robert Mohns

Written on: January 8th, 2016 in design, user experience

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.

Image comparing text size on phone in portait vs landscape

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. [1] [2]

Chart of reading speed (words per minute) vs. print size (x-height in degrees

They found that reading speed is fastest when the text’s x-height is 0.3 degrees of arc.[3]

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…

Image of a font picker

…we measure visual acuity by how much of your field of view an object takes up:

Diagram of visual arc

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[4] 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:

Comparison of various fonts x-heights at the same height

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.

Illustration of the same size fonts on different size screens

Even within a single device class there will be a lot of variation. Here’s a sample of screens around imarc:

Screens around our officePhysical Sizeppi
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[5], 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:

  1. x-height of chosen font
  2. degrees of visual arc
  3. virtual pixels to physical points
  4. 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

then:

  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:

Fontx-height ratio
Arial 0.519
Arial Unicode MS 0.518
Calibri 0.466
Cambria 0.466
Candara 0.463
Code2000 0.444
Comics Sans MS 0.532
Courier 0.425
Courier New 0.423
Garamond 0.384
Georgia 0.481
Helvetica 0.523
Tahoma 0.545
Times New Roman 0.448
Trebuchet MS 0.523
Verdana 0.545

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.)

Jeff, sitting at his desk

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).

Desktops

104ppi at 23″Times Arial 
Minimum 14pt 0.20° 12pt 0.20°
Recommended 18pt 0.26° 15pt 0.25°
Generously Large 21pt 0.30° 18pt 0.30°

Laptops

121ppi at 14″Times Arial 
Minimum 10pt 0.20° 9pt 0.21°
Recommended 13pt 0.26° 11pt 0.26°
Generously Large 15pt 0.30° 13pt 0.30°

Phones

167 nominal ppi at 14″Times Arial 
Minimum 14pt 0.21° 12pt 0.20°
Recommended 18pt 0.26° 15pt 0.25°
Generously Large 21pt 0.31° 18pt 0.31°

60″ Flatty (HDTV)

37ppi at 140″Times Arial 
Minimum 31pt 0.20° 26pt 0.20°
Recommended 38pt 0.25° 33pt 0.25°
Generously Large 45pt 0.30° 39pt 0.30°

Recommendations

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?

Check out our Clean Code eBook and learn how the integrity of your code affects everything from SEO to Responsiveness! Get eBook   


Footnotes and further reading

  1. 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.  ↩

  2. And if you liked that, you should check out Legge’s other work. The stuff’s fascinating.  ↩

  3. Around 300 words per minute for most people, but up to 1000wpm using Rapid Serial Visual Presentation. That’s a special case that probably will not apply to your web page.  ↩

  4. Not to get into the fonts vs typefaces pedantry, but a typeface is the design of the letters, while a font is the package of those letters – whether it be a tray of metal type, or Inconsolata.otf.  ↩

  5. As my freshman science advisor told me, “Unanswered questions raised by your research are how you get funding for your next project.”  ↩

Share:

Let's Talk.