My main browsers (FF and Chrome) are both configured for a 12 pixel font. In both browsers the font picker shows a font preview, and in both they are the same size and a comfortable size for reading web sites. My IE doesn’t allow me to set font size, but seems to default to something a little bit larger than Chrome.
On my personal website, I use XHTML & CSS and have designated the page font as ‘medium’, and use that font size for all of the principle text (the ‘content’ text). When I view the site in IE 7, FF 3 and Chrome 0.4 the font displays as expected and matches the font pickers (except in IE where it’s a little larger).
BUT, I go to nearly any other website (Google, StackOverflow, The DailyWTF, CodingHorror, Microsoft, Sourceforge, even W3C, etc) and they all display in tiny little microscopic fonts – what I estimate is 5 – 7 pixels.
This is true on 3 different computers, with 2 different O/S (Vista and XP) and 4 different monitors (laptop, CRT, and brand new WS LCD).
What’s up with that? Am I overlooking something fundamental about web site design that I need to know? Or is it just that all these web sites do dumb things like setting the font to 50%, or 0.5 em, or x-small??? Why can’t web site designers honor my font selection for the content text (I understand that side-bars, and footers and such might reasonably be small or x-small).
I would be tempted to think it’s just uninformed web site designers, but, heck!, these are some big name sites!!
EDIT: To be clear I am not saying using em or % is dumb, I am wondering why many sites seem to use about 50% of my configured size. Surely my configured size is the size I would like to see text in.
EDIT: From W3C’s CSS spec: ‘The following table provides user agent guidelines for the absolute-size mapping to HTML heading and absolute font-sizes. The ‘medium’ value is the user’s preferred font size and is used as the reference middle value.‘ – emphasis mine.
There’s a consensus coming through that web sites base relative font sizes on the typical browser default of 16px, which is unfortunate but ‘that’s life’. But what about other systems – can we expect all browsers to so default?
At least I understand the problem now.
I want to leave this question open for a while to see if others have differing views, before I select a final answer.
Conclusion: I have reset all my browsers to 16px (18px on my 125 DPI machines), and set my website to use font-size: 90%. This is giving a good display size and, of course, all my favorite sites are now readable. Thanks for all the constructive answers and the lively to and fro.
This is a great community.
Most browsers – if not all of them – set the default font size to 16px. Many websites use relative font sizing too. This will cause you a problem if your browser’s font size is lower than this.
Consider the case where you have a default font size of 16px in your browser. When the website font is 1.0em, it will display as 16px. Some other text maybe be 0.7em though, so that’ll be smaller. However, if your default browser font size is 12px, 1.0em will be 12px and 0.7em will be unreadable because it will be so small.
The solution is to keep your default browser font size to 16px, which will give you a realistic view of what others see when they view your site. Oh, and using relative font sizing is best-practice, not a mistake.