There are already many articles written discussing the best way to size text for the web, a few are listed at the end of this article. An important fact to remember:
Visitors to your web site will be using a variety of browsers and browser settings, screen settings, and operating systems. The majority may be using “whatever the PC came with”, but some percentage, perhaps a significant number, will be using a more personalized browsing environment. The number of people using “non-standard” browsing environments is growing, too.
These people do this not because they want to “break” your web page, but because they have needs that make the default settings deficient or inconvenient.
One group of those settings relate to text size.
Windows desktop browsers are typically “factory set” to 16px (or 12pt) Times New Roman. Not everyone is happy or comfortable with these defaults and there are various reasons why a person wants or needs larger or smaller type.
The point is: one size does not fit all. That, however, does not prevent many web authors from setting small type size that they consider “looks good” compared to the typical factory default.
Readability by all visitors to the site is by no means guaranteed, though. Even if the user has changed their default size up or down, many sites ignore user defaults altogether and set fixed type sizes at anywhere from 8px on up.
Most browsers do have some sort of zoom capability that the lets the user increase or decrease the type size on individual pages as needed. Some zoom methods affect the whole page, including graphics, where others only zoom text.
It is up to the user to adjust each web page as necessary.
Zooming can be a great thing for the user, but it is also annoying to continually adjust up and down:
Hopefully, you get the picture.
To aid those who use larger type, most browsers now have what is known as a “minimum font size” setting, which ensures the type size will never be too small for the user's comfort.
This saves the user from having to repeatedly adjust type size on every web site they visit and is a real boon to both web accessibility and browser usability. Now zooming is rarely necessary and on most sites type is easily readable without any extra effort. Hurray for users!
The accepted norm by proponents of web accessibility is to set body text size at 100% (or 1em). This equates to the visitor's default text size, whatever that may be, and is known as relative sizing. It is A Good Thing.
There is a practice, however, that has become much more common recently of sizing type in a convoluted way. It claims to stay within accessibility guidelines of using type sizes relative to the user's default, but is intended to result in body type smaller than the default. It's that whole “looks good compared to factory settings” thing for the majority of users.
But it is wrong, and must not be done.
The original article on the method is posted at <http://clagnut.com/blog/348/> but the idea in a nutshell is:
I'll point out that the clagnut article explicitly states that value was chosen as an example only because it resulted in nice round numbers for calculation purposes, and not recommended because it is too small for most people. That, of course, doesn't mean that those who copy the method think for themselves and use more reasonable values. They tend not to. Whether clagnut intended or not, they have set a bad example. The sheep have followed.
It begs the question:
I have not found any argument that makes any sense of this at all. Be that as it may, there is a real reason to stop this madness: the effect it has when the user has a minimum font size set.
Let's take that method and compare the results with and without a minimum font size setting. Note that sizes are rounded up or down to the nearest whole pixel, and the values are arbitrary, but entirely realistic.
| Font Setting | No Minimum | Minimum Set |
|---|---|---|
| default font size | 16px | 16px |
| minimum font size | 0 | 14px |
| body font-size:62.5% | 10px | 14px |
| content font-size:1.4em | 14px | 20px |
| content % of default | 87.5% | 125% |
125%! Every time I come across a site using this text sizing method, it looks like the page is screaming at me. If you need more proof, look at a screenshot of a page using the technique.
Unfortunately, zooming text out does nothing to reduce that huge type size, because the initial 62.5% is prevented from going any smaller than the prescribed minimum. The user is thusly penalized for being “non-standard”.
It's been suggested that this is a browser bug, not a flaw in the methodology, because the browser should not mess with the size until it's been through the whole cascade. That minimum should be applied at the very end, not at the beginning.
Even if I agreed with that (which I don't), it's irrelevant, considering that both Firefox and Opera behave the same way. It is unrealistic to think that both browser makers, who apparently agreed on how to apply the setting, will agree to redo the whole thing to appease a few web designers. I suppose stranger things have happened, but browser makers have far bigger fish to fry. KHTML browsers do apply the setting at the end of the cascade, but the number of Windows users running KHTML (Safari) is less than 1% and I don't expect it to get any higher. Firefox and Opera users on Mac and Linux are also affected, of course.
Set body font-size to 100%. This will not only start out using the visitors preferred size, but will also avoid some very strange em scaling issues with Internet Explorer.
If you are determined to use smaller than default size for content, then set that reduced size on the content block and be done with it. Too many authors over specify fonts for every element. It is so unnecessary. Learn to use descendent selectors properly and you can get rid of a lot of bloat, plus avoid inheritance problems prevalent with over specifying font properties. If the bloat is generated by your editor, make it stop!
I also implore web designers to think more about the users of a site, not just how it looks to you or your client. I hear more and more complaints from regular users about tiny type on web sites, so the excuse that browser defaults are too big just doesn't cut it.
While looking for related articles, I came across one by Jakob Nielsen, noted usability guru. The article is from 2002, but is not as dated as you might think. He says, and I agree wholeheartedly:
“While creating a website, designers don't actually read the information on the pages. They simply glance at the text to make sure it looks great. In fact, many designs are approved with ‘lorem ipsum’ standing in the place of real copy. When you don't have to read the words, it doesn't matter that the characters are small.” Let users control font size
Other articles on text sizing for the web:
