To start with, some theory
Nowadays, most browsers come with a default font size preference. We can change this setting, but browsers usually come with a default value of 16px, or 12pt. These two are usually the same, due to the 96 DPI assumed by most systems. You can test this here.

Another option that some popular browsers have, is the ability to change font-size on the fly. This means that while reading a page, user can press a certain key combination (usually ctrl + / ctrl - or cmd + / cmd - on a mac) to quickly adjust the font size. This is quite handy when only a certain website supplies fonts too big or too small.

The third important preference is the “minimum font size”. By setting this to, let’s say, 12px, we assure that no text on any website can be smaller than 12px.

What they tell us to do
With the default font-size setting of 16px, a large percentage of internet users is able to read text comfortably. A few facts might explain this. Also, W3C suggests designers to avoiding sizes smaller than user’s default font size. This would make sure website visitors have no trouble reading our site and are reading it the way they like to, since this is their preferred font-size setting.

The problem
All this sounds just too nice to be that easy. So, what’s the problem? Try asking your mother what her default font-size setting is. I bet she has no clue what you’re talking about. Most people don’t even know they have such a setting. And how many of the ones that do, have bothered changing it? The problem is, most sites don’t respect this setting so it would make no difference anyway. Therefore we can assume most internet users use a default font size of 16px. By following the W3C suggestion mentioned earlier, this should be the default look of most websites. But is it?

Is the default size okay?
Some designers, including myself, agree that 16px is a tad large for normal reading. For example, would you really prefer reading this over this? On the first screenshot you see an article on A List Apart with 16px set as minimum font-size and on the second with default settings. I prefer the second. But according most accessibility experts, the first screenshot should be the way to go.

I’ve been following a discussion on the WSG mailing list about using 16px or not. I’d just like to point out a few things:

• Of course, there are people with bad eyesight who have trouble seeing smaller text. But shouldn’t they be the ones to adjust the text? They can still set their minimum font-size to a value they’re comfortable with. No need for everybody to be reading enlarged text.
• On the topic of people with bad eyesight - Don’t they wear glasses or contacts to help them see better?
• People tend to enlarge text (as described in the first paragraphs) when too small rather than to shrink it when too big.
• Why don’t operating systems use 16px fonts if that seems to be the optimal size?

Are there benefits of smaller font sizes?
Yes, 16px is very legible, but it can cause problems. As you can see in the above screenshots of A List Apart, with bigger text, there is fewer content on the screen at a time. It becomes hard to quickly skim the page, a menu or a paragraph since there is just too little visible content. Also it requires scrolling more. Especially if you consider the 800×600 resolution.

The real world
So yes, in my humble opinion, 16px is too big to be the default size for most users. But on the other hand, it’s very good for them to have an option of customizing it. Users with bad eyesight have probably heard of the option to resize fonts. And they are probably using it. But I do think there are still more users that rather read smaller text. How did I come to that conclusion? Look at the web as it is today. How many websites really use 16px fonts? Not many. And I bet there’s a good reason for it. People obviously prefer it that way. And when making a website for someone, I’ll usually follow his or her guidelines, not those of W3.

I know, I’m confusing the default 16px size with user’s setting. But as mentioned earlier, sadly, these two values are mostly the same. If all users set this value according to their preference and not just keeping it as it is, the story would be different. In that perfect world, text size would be the same everywhere - the user’s preference. But such as it is, user’s find 16px too big and blame the designer for it.

A while ago, since I find 16px too large, I set my default font size to 12px. And what did I find out? That even though some sites respect this setting, they usually specify their fonts to be about 70% of the user’s default value. Which meant I suddenly had to read font sizes of 8 or 9 pixels. Now that is a bit small. So I went back to 16px.

Browser problems
As with just about everything nowadays, browsers have problems here as well. The first is, surprisingly, Internet Explorer. Along with 7.0, IE doesn’t have an option to change font-size on the fly. It does have a font-size option in the menu, but this is actually the default font-size setting. What it means is it will get overridden by something like font-size:12px; True resizing of fonts on the fly takes that value and enlarges/shrinks it as long it doesn’t go bellow the minimum size. Default font size is there just in case nobody ever tells the browser otherwise.

One other problem I’ve heard of just recently, is a problem with minimum font size. Some browsers seem to treat it badly. For example:

body { font-size:10px; }
p { font-size:120%; }

would mean that paragraphs should have a font 120% the size of body’s font, making it 12px. If we have minimum font size set to 12px this is ok. But some browsers would apply the minimum font size to the body, making that 12px and then apply 120% over these 12px, making the paragraph font size 14.4px. While testing this I noticed IE doesn’t even support setting minimum font size, safari and firefox do it correctly and opera doesn’t. See the test case. The text size should be 15px if minimum font-size doesn’t go over that. In opera you get a font-size of 45px with minimum font size set to 15px.

Web developer’s point of view
There are two ways of describing the font size. Absolutely, setting the font size in pixels, or relatively in percentage of browser’s default size (where font-size:1em; equals font-size:100%; or not setting the size at all). I used to do it relatively, to overwrite the (silly) 16px default size. But I figured there are two reasons why not to do that. First being IE users, who can’t resize the fonts this way. Secondly, I figured, should I really overwrite those 16px? Of course not. Now I usually set my fonts to something like 70% or 80% (of the default). This means that people who don’t know how or why to change the default size see fonts as I’d like them to and the ones who do probably already know that this rarely works as expected and also know how to enlarge the text if they have to. This is not the standards compliant way, but according to my calculations pleases the most users.

So I tend to keep most of my text at around 12 or 13px, but keep in mind that some users might change this. For example of what not to do I always like to link to this website. I find the design very lovely… until enlarging the text. It looks a bit funny after that.

Different fonts, different sizes
One more think I’d like to mention is that different fonts demand different font size. See a little demo here. It presumes you have all 4 fonts installed. Notice how Verdana still looks legible at 11px while Arial can barely be read.

Final thought
It’s nice to know the rules. Only with knowing them you can truly explain why you are breaking them. But don’t take it as an excuse. Always keep in mind that some people might not have the same eyes and the same display as you and that even though one font size is fine with you it might not be fine with your users. Font sizes can vary according to the content or type of users reading the page. And do try to offer the user an option to scale the font according to his or her likings.