FAHNZ

MODE

Base CSS Font Sizes Gone Wild (plus bonus CSS reset!)

I’ve been working on my version of a CSS “reset” file lately trying to achieve a gentler reset than the big ones out there. Specifically, I don’t want to reset everything all the way to zero; I’d just like better control over what those defaults end up being (cross-browser of course).

So, I’ve got almost everything done on my reset when I get to the point of wanting to set the base body font size in the CSS. So, as I have done in the past, I looked to the internet for guidance on what the best practice is. So the internet tells me:

  • Set the base body font size to a percentage in the CSS to alleviate Internet Explorer text sizing issues. (yup, knew that already)
  • Always use “em” units for your subsequent font sizing. (of course – been doing that for years)
  • Your base font size percentage should be… (!)

What? There’s no standard out there among the CSS gurus as to what that base font value should be? I was surprised.

So, time to do my own investigating to determine what my base font size should be. Here’s a list of websites that I checked and their base body font sizes:

Curiously, Twitter, Facebook and Yahoo! all use pixels as their base font size:

  • Twitter (0.75em, but overridden to 11px almost everywhere)
  • Facebook (11px)
  • Yahoo! (13px) use px as the base font size.

I’ve seen the 62.5% value often as a means to set the default browser text size to 1em = 10px. Obviously for those who want to set their fonts in pixel sizes, but know they can’t do it directly. Seems that it would work pretty well. For a long time now, I’ve been using the base font size of 76% as based off of this post by Owen Briggs. Strange that there isn’t more of a consensus among the CSS elite, but I think I’ll stick with Owen’s standard. I mean, anyone who took the trouble to take 264 happy little screenshots on the subject of CSS typography deserves some serious recognition.

I still think that the default sizes for the headings could use some tweaking, but I have a CSS reset demo page as well as having the demo pages available in a zip file.


One Response to “Base CSS Font Sizes Gone Wild (plus bonus CSS reset!)”

  1. Great post, going to send this link to my friends. Truly love it. THX.