Why is 13px Arial font the web standard?

Question

If you use any of Google's applications, from search to Gmail you will find the base font used for most things is 13px Arial.

font-family: arial, sans-serif;
font-size: 13px;                       

I always thought 16 pixel fonts were easier for the "masses" to read. However, Google seems to disagree - and they are not alone. Twitter's Bootstrap project and many others also use 13px fonts. Even the text of this very site is only 1px bigger.

Do web browsers have it wrong, is the proven standard font size really 13px and not 16px? What about mobile devices - which works best on them?

Note: Serif fonts (Georgia) need larger sizes than Sans-Serif (Arial). However, most everyone agrees that Sans-Serif are easier on the eyes in digital format while Serif are easier to read in printed media.

---

Edit: Is there research or usability tests that back 13px? What evidence supports this trend? Where can I learn more about the pros/cons or applicable states for this size?

Answer 1

First of all 13px Arial isn't a standard. Arial is commonly used for, I guess, couple of reason:

1. It's decent when it comes to readability (though people tend to disagree, as in this Typophile discussion)
2. It's a plain sans-serif font treated often as wider spread equivalent of
   Helvetica
3. It's quite old (early 80s)
4. It's packaged on Windows since the early 90s and has been available on Macs since Mac OS X (though, as always, there are difference in rendering)

Why does 13px seem to be more used than different sizes? No idea. But please notice that bigger size of a font doesn't always equal enhanced readability. In some cases it even can decrease readability of text.

While we're reading our eyes are moving thanks to saccadic movements and stops every 25-30 milliseconds for fixation which lasts for about 200 milliseconds. In one fixation we can unconsciously perceived and process signs that are visible in fovea, which is about 1,5 cm wide. You need to find perfect combination of numbers of signs that fits fovea and are highly readable. So 16px isn't always better than 13px.

When it comes to adults reading is a top-down process, so semantic meaning is derived from just a couple of letters, previous words and grammar construction of a sentence.

Huh... hard stuff.

Of course nobody proceeds such a analysis. It's only for cognitive psychology nerds who loves typography ;).

Hope it helped you somehow.

Answer 2

Some years ago, like by 1998 or 1999, one would look at the pixel size (termed dot pitch) when purchasing a monitor. As of today’s standards (and let alone those Retina displays) pixels then were quite big. For example monitors were of the VGA kind, sporting 640 pixels horizontally. The usual size was 14″. Now screens in notebooks are about 14″ too, but they show 1280 or 1600 pixels instead of VGA’s 640, in about the same size.

This means that nowadays pixels are much smaller. If 1280px are displayed in (about) the same with where we saw 640px means that size is now ¼ of the original (half the side length, ¼ the surface). At 640×480 the serif fonts looked ugly, because the monitor was unable to render those tiny tips with enough detail. Anti-aliasing came later and helped a lot but text still didn't look sharp. Thus, we all preferred sans serif fonts.

Microsoft released Verdana as a font for screens. It renders slightly bigger than the other fonts, and also has a higher x-size well matched by its width that makes it quite readable. So everybody switched to sans serif fonts, and pages set in the IE default Times New Roman looked outdated. On the other hand, many @media print stylesheets still specified Times because printer resolutions (in DPI) were much higher, and still are.

IE specified the same default fonts as Netscape did, to avoid breaking page layouts. Mozilla did the same later on. And all other browsers. Nobody takes the risk of making the change, and it doesn’t matter because nowadays almost everybody sets the font family and size for their sites.

So, IMO, we get a default of 13px because of historical reasons.

Choosing Arial is smart move. Check this web fonts statistics: Arial is in almost any computer out there. It comes with Windows and I think that with Macs too. There are equivalent fonts for Linux. Arial is surefire for a company that wants to deliver their service with the least trouble for the user.

As of the testing of fonts and font sizes for the web, I learned a lot by reading the Human Factors International newsletter. They ran readability tests on different font sizes and line lengths. But, as Mikko correctly pointed, it also depends on the reading distance.

Answer 3

There is no proven standard. Font sizes on the web, at least for now, are still mostly not correlated to real world static measurments.

For instance, font-size: 16px will vary in actual physical size depending on:

• the particular font styles installed on the end-user's computer
• browser interpretation
• the dpi of the display

Hopefully that will change eventually where we can use actual physical measurements and assume some level of consistency across devices and platforms.

As for why Google went with 13px for their embedded fonts, I don't know, though theories could include:

• they, like many designers, feel that 16px is just simply too big
• embedded fonts, for reasons I don't fully understand, tend to be rendered at smaller sizes compared to the same settings but with a non-embedded font.

Answer 4

My take on this is that people first "standardized" around 12px and then at some point thought, "hmm, this should be just a little bigger." Or at least that's what I did. :)