Definitive method for sizing font in css

Question

Hi there, I would like to know some opinions from experienced developers on what they think the definitive way to size fonts (in a base sense). I know that working with ems is considered best but im referring to the best way to set the base font size.

There is the technique of setting font to 10px using 62.5 method but i think ie has an issue with rounding which throws this out slightly (perhaps not)

YUI framework uses

body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
/* for IE6/7 */ 
*font-size:small; 
/* for IE Quirks Mode */
*font:x-small; 

}

which really confuses me!

Tripoli uses

html
{
   font-size:125%;
}

body
{
    font-size:50%;
}

a list apart suggest something along the lines of :

body {

font-size: 16px;
*font-size: 100%;

}

So which is the best either out of these methods or any alternatives. The best being the easiest to work with and the most reliable cross browser.

Answer 1

Well lately people have been going back to straight pixel sizing because all the modern browsers Zoom functionality increases everything proportionally now, rather than just increasing the font size as in previous versions. 12px is the standard base size for standard text that I've seen.

Answer 2

There is the technique of setting font to 10px using 62.5 method but i think ie has an issue with rounding which throws this out slightly (perhaps not)

That's the technique I use daily and I didn't encounter any IE bug due to this, if such a bug exists. Working with em is then really easy, as long as you can divide by ten without using a calc! You just have to use font-size property with elements like hN, li, p and so on but don't try to size both a parent div or blockquote and child paragraphs and headings otherwise children elements don't have the 10px<->1em equivalence anymore.

If you use a CSS framework, stick to the method it uses.

Off topic, I use conditional comments and no star hacks. Ever.

That said, there's no definitive answer to your question (sb wrote 'em vs px is an holy war' on a recent topic and (s)he is quite right IMHO).

From an accessibility point of view, here is a corresponding sufficient technique : C14: Using em units for font sizes - WCAG 2.0 It's not the only way to achieve Success Criteria 1.4.4 Resize text:

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) 

C12 is the same, only with percentages, others aren't, as far as i remember, as cross-browser compatible.