When I start my documents, I set the parent font-size like this:
CSS
Code:
body {
font-size: 62.5%;
}
What this exact percentage does is allow em to be used as if it was px (at default font-size). This allows me to set not only fonts with ems, but margins, paddings, and dimensions of any element with ems, allowing it to expand along with the fonts when the font defaults are increased by the user.
You must be careful, however, when using this method, about setting font-sizes on elements that are parents of other elements. This means that I am as specific as possible when setting font sizes, since everything will be expressed with em. This means, for example, I may set font-size on a <p> or an <li>, but not usually on a <div> or a <ul>, because I may want to mimic pixel dimensions on the latter two type of elements.
I use ems throughout my document. The only reason I use a percentage on the body (the parent of the entire document), is that there are some browser compatibility issues with the default value of em. By resetting the font-size in the body as a percentage (the most compatible format), em becomes uniform across all browsers, or at least very very close.
Some people also do this:
Code:
body {
font-size: 100.1%;
}
The reason for the extra .1% is that there are some rounding errors that happen in some browsers (namely IE), and the .1% gets rid of it for some reason.
Once you find a method you are comfortable with, you will see that using em is the best way to express almost all of your font-sizes.
The End.
