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:

• meyerweb.com
  font-size: 0.84em;
• alistapart.com
  font-size: 0.8125em;
• davidwalsh.name
  font-size: 62.5%;
• csszengarden.com (default theme)
  font-size: 75%;
• jontangerine.com
  font-size: 100%;
• cnn.com
  font-size: 100%;
• google.com
  font-size: small;
• microsoft.com
  font-size: 70%;
• wordpress.org
  font-size: 62.5%

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.

Web standards, accessibility, WCAG, XHTML, CSS, blah, blah, blah… My web pages look just fine. Why should I care about the so-called “web standards”? Well, do you care that your car was built with and tested for safety standards? Do you care that if you buy a DVD, it will just work in the player you have at home? Does it bug you that you can’t just go buy a replacement battery for your digital camera (or it’s exorbitantly expensive) since it’s proprietary?

Having standards solves lots of problems.

What are web standards?

At a minimum your site will have:

• Valid HTML/XHTML
• Valid CSS

Hopefully your site meets some basic accessibility standards:

• Section 508
• WCAG priority 1

Even more hopefully, your site will meet the more strict accessibility standards (I usually go up to WCAG priority 2):

• WCAG priority 2
• WCAG priority 3

Also, just passing these tests isn’t enough. Seems stupid to say this at this point, but you shouldn’t be using table-based layouts and some thought should be given to how your site will degrade in text-based or unknown browsers. Focus on what matters: the content and usability. Do you really need a bunch of Flash animations and fluff on your site? If you do, then chances are good that people won’t hang around long enough for it to be successful anyway.

Adhering to these standards ensures that your pages can be viewed properly on a wide variety of platforms now and well into the future. You’re pretty much guaranteed that new web browsers will be able to view your pages properly, versus a poorly coded page that will probably fall apart visually. Check out your sites on a wide variety of browsers and devices and see what happens. Check it out on your mobile phone or on your PS3 or Wii browser. If you’ve been coding for IE only (thus making your site proprietary) it will be immediately evident.

Not to mention the fact that coding according to web standards can save money. Pages are more likely to work right “out-of-the-gate” on a greater variety of browsers/devices. Less testing plus increased compatibility = win. Standards-compliant code by definition means that developers new to the project should be able understand and maintain what was written.

Popular Validator Links

• W3C Markup Validator
• W3C CSS Validator
• HiSoftware’s WCAG Validator
• WAVE Validator

For More Info…

• Wikipedia on Web Standards
• Web Standards Group
• Great Q&A list on the W3C site