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

“What’s the best font size?”
—Every new web designer ever

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 70” screen 12 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. [1][2]

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.

Issue #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.

Issue #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:

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

Issue #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…

Issue #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:

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.

Issue #5: But 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 applicable to devices like the "Retina" MacBook Pro, Surface Book, Chromebook Pixel, iPads, and most phones.

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.

Ok, we're done with the detour. Now that you know some of the issues we're dealing with, we can apply it.

Four factors that affect readability

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, 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, I made a simple font size calculator:

Here are some common x-heights you can try, courtesy of Jukka Korpela’s x-height tool:

How small can we go?

What happens if we set Times New Roman at 12 points, instead of 16? 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°.

Let's get some real-world data

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

Laptops

Phones

60″ HDTV

Now, using the calculator above, we can run through some more scenarios, quickly and easily.

Working at our desks

Let’s step over to Allison’s 24″, 1080p screen. That same 16pt text, with 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.

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.

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

Updated Apr 28, 2021 with interactive font size calculator and improved readability. Originally posted on Jan 8, 2016.