PFunked

CSS Font Sizing

The Issue

After a recent xhtml validation attempt, W3 presented a page promoting the respect of browser default font size.

After checking my CSS -- sure enough, I'd set my base font to 10pt and scaled the rest of the site's text with em. The latter practice was good, but W3 says I shouldn't be setting a hard default font size. Instead, I should leave it at the default 1em. So I changed it.

But it was downright huge, especially in the helvetica/sans-serif font family I was using. Huge, at least, in comparison with my OS fonts -- the context menus, the buttons and icon labels, were all around 8pt font. My Firefox settings showed the default as 16px. I fired up IE7 and the font looked the same.

The Top Sites

What do the top sites use? Here's a scan of the top 10 sites on the web. (Top 10 sites according to Alexa at the time of this writing)

Only MySpace and Facebook used the same default font. The kids like their fonts small. Everyone else took a different approach. So much for standards. One thing's for sure, all of these sites use a smaller font than the 16px browser default for content.

The Scale

I'm used to seeing fonts in pt sizes, as when using WYSIWYG document editors. Although pt is for print, most people who use computers have a good feel for what pt sizes look like on-screen. Screen resolutions vary, so this data won't be complete. I found these conversions using Google's calculator. For instance: "12 points in inch / 96".

A Compromise: the Magic 83.33%

My screen is at 96dpi. That means the default 16px browser default renders just like a 12pt font on my screen. I want my font to be the equivalent of 10pt though. So, I assume the most common configuration -- 96dpi and 16px browser default. I need to get the font to 13.33px. 13.33/16 = 83.33%. So I set my body font as:

body {
  font: 83.33% helvetica, arial, sans-serif;
}

Having my base font at 10pt makes all my em scales for any derivative fonts easy to understand. Now, on my site, 10pt = 1em. So 1.2em becomes 12pt, .9em becomes 9pt, etc. Now I know exactly how my fonts will render in the most common configuration. At the same time, if a user sets a higher default font size for accessibility purposes, my site will scale along with his settings.

An Alternative: 62.5%

If you need pixel-specific control instead of PostScript "points", Try using a base font size of 62.5%. This puts your base font at 10px (10px/16px=62.5%). 10px is very small and should be scaled up. The nice thing about 62.5 is that you can easily scale relative to the base font using ems, where 1em=10px. E.g. if you know you need a font exactly 12 pixels high you can set the derivative font size to 1.2em.