When starting a new design one of the toughest decisions you have to make is about fonts. How do you specify font sizes? How do you please every user and accommodate every (almost every) browser? There's no simple answer to this. There are a number of choices before you, and each one has its pros and cons.
Your goal is to make content accessible and pleasing to all users. Otherwise, why are you running a site in the first place? The problem is you can never make assumptions about their default browser settings. Modern browsers render "default" text at 16 pixels (96 pixels per inch). Text of this size is too big for most people which is why they switch to something they are comfortable with. Mac users go back to 12 pixels (72ppi). Internet Explorer/Win users switch to smaller.
So, having this equation with many unknown variables (namely, user preferences) how do you go about solving it? Do you choose to express font size in em units? Or percentages? Pixels?
Once users change defaults your percentage or em math falls apart. All of a sudden what looked good with defaults on your computer looks illegible on the users' screens. Also, both ems and percentages suffer from a side effect: they compound. For example, if you have a <div> inside a <div> and you set the font to be 0.8em what's the font size in the nested <div>? It's 0.8x0.8=0.64! Probably not what you expected. It's easy to overlook this aspect and cross into the tiny text territory.
There's another alternative—the font size keywords. Size keywords are great in the sense that you never end up with text too small for reading. Neither do they compound. What messes everything up is their implementation in different browsers. In Internet Explorer small is medium and medium is bigger than medium.
The only approach that has worked consistently over the years is expressing font size in pixels. A pixel is always the smallest dot on a screen. True, given the size of a monitor and the resolution 10px may look differently, but 10px will always remain 10px. The same site is guaranteed to look the same in almost all browsers without all the mess of ems, percentages, font size keywords, etc. After much consideration, I decided to go with pixel-sized fonts on this site.
Even though I think pixels fit the bill just great they have a downside too. Users of Internet Explorer/Win cannot resize the text. Mozilla and Opera have had a text zoom tool for quite some time now. People with various degrees of visual disability may resize pixel-based text to their liking. IE users aren't that fortunate. Considering that IE dominates the browser field (for now) the majority of people are deprived of this choice. There's an option buried deep in the browser settings but (1) go find it, and (2) who knows about it? Both Mozilla and Opera have text zoom where visually impaired people can find it easily.
Style Switcher To The Rescue
To accommodate IE/Win users and give them choice you can implement a style switcher. Paul Sowden published an article along with JavaScript source code at A List Apart a while ago. With a mouse click you can switch styles with larger or smaller fonts. While you're at it, you can also change the overall layout. It's like loading a different stylesheet at runtime. You might've noticed I added this kind of style switcher to the sidebar.
Rationale
The contest of which approach is better is not over. It won't be for a while. You have to carefully assess what works best for you. If you want to cater to user's preferences do your math with percentages or em units carefully. If you want to make sure your content will look the same across the board go with pixels but do give users some choice to change font size. All in all, it's about making it appealing and usable to your visitors.
