12

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?

|improve this question
  • 6
    I'm not sure that statistically speaking, it's a valid argument to say that a 13px font is the most common size, when only citing a handful of (albeit popular) examples from 300+ million websites, when only a small range of font pixel sizes is appropriate for general readability anyway. It may well be true - but what credible research is there to confirm this? Maybe this is what you're asking? – Roger Attrill Dec 12 '11 at 18:30
  • 1
    It may not be based on research. Most designers just copy what they see on other sites. That's not always a bad thing, mind. – Alex Feinman Dec 12 '11 at 19:16
  • 2
    You may want to read some of the references in this post over on SO stackoverflow.com/a/4265842/54746 – CaffGeek Dec 12 '11 at 20:25
  • 3
    There was an article based on a research of 50 popular sites, which found 13px to be the most popular size smashingmagazine.com/2009/08/20/… – Emil Dec 13 '11 at 6:31
  • 2
    @RogerAttrill popular sites are the best metric; If Google used Arial and 300 million random sites used Helvetica, more users are probably seeing Arial than Helvitica. Of course you need some real numbers to be sure, but as an estimate, you can safely assume more people see what's on the top 10 popular sites than a large number of random sites. – Ben Brocka Dec 13 '11 at 22:29
15

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.

|improve this answer
  • 5
    +1 I have no idea what you're talking about. But this is the kind of stuff that I'm looking for, so let me see if google can add to this... – Xeoncross Dec 12 '11 at 21:15
  • 2
    I would recommend two books if you want to elaborate on that. For a start: Designing with Mind in Mind by Jeff Johnson and 100 things every designer needs to know about people by Susan Weinschenk. They are both excellent psychologists and UX people. – marcintreder Dec 12 '11 at 21:23
  • 6
    While the eye movement stuff is true, I don't think a web site should use 13px instead of default size because of that. It all depends on pixel size as viewed by the end user--think about an user viewing the screen from 60 cm away and another user viewing the same screen from 90 cm away. The size visible in fovea is not the same for both users. Just use 1em for the body text and you'll be fine. Trying to do otherwise is like calling your local TV station and saying that your TV sounds too loud. They'll tell you to adjust the TV volume. For web sites: just let the user set the right size. – Mikko Rantalainen Dec 19 '11 at 13:45
  • as Matt said earlier - Great answer. You know you fonts! – Benny Skogberg Sep 17 '12 at 19:24
  • @marcintreder, While it may be true that smaller font size can improve readability, it's definitely more likely that the opposite is true. Erring on the side of having a bigger font size is definitely the safer way to go. – Pacerier Sep 18 '14 at 13:23
7

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.

|improve this answer
2

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.
|improve this answer
  • Companies like Facebook, Google, and Twitter are going by more than just feeling. I'm wondering where the research they did to choose this size is. There is evidence for this choice somewhere. – Xeoncross Dec 12 '11 at 18:28
  • 1
    Again, no. There is no 'proven standard'. There have been studies on type legibility over the decades, some more telling than others, but for the most part, it's just a balance game of aesthetics, readability, content density, and the like. They may have tossed in some user testing as well. However, in general/traditionally most graphic designers would state that type in the 9pt - 12pt range tends to be the 'norm' even if not a standard. 13px in CSS tends to fit into that ballpark. – DA01 Dec 12 '11 at 18:41
  • 4
    Oh, and as an aside, while it's nice to think that all of these companies do rigorous user testing, research, and the like when it comes to making UI decisions, more often than not I think you'll find that it is often just a 'feeling'...often by someone that claims to be a manager. ;) – DA01 Dec 12 '11 at 18:44
  • I think that nowadays browsers come with 16px default because of legacy content. The 16px default is sensible because you can read "too big" text but you cannot read too small text. As a result, it is safe to be on the big side if a proper default cannot be set for everybody. The most important preference that browsers should ask for is "which font size you'd prefer to read?" -- sadly, no browser does that. – Mikko Rantalainen Dec 19 '11 at 13:50
1

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

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.