How to attain cross-browser font size consistency

Being the conscientious web designer or developer that you are (you must be or you wouldn't have found this article!) you like to create accessible websites that offer the user resizable text. The only problem is that you get inconsistencies when you use ems or percentages to set your font sizes, thus affecting your cross-browser appearance.

Assuming that you don't use table layout (which confuses IE's font size rendering), there is a very simple way to ensure that your font sizes are consistent across all browsers.

Firstly, set your base font size using 63% as your font size. You should do this in your body style declaration:

body {
    font-size: 63%;
}

Then, when you are setting your font sizes for your different elements you should use ems, for example:

#wrapper {
    font-size: 1.4em;
}
#navigation {
    font-size: 1.2em;
}

This sets a consistent base line for all browsers to follow. You can experiment with changing this figure slightly and you should start to notice that font sizes will start being inconsistent straight away; for example if you reduce the base line figure to 62% Opera drops down a step; increasing it to 65% knocks IE6 and 7 up a notch.

I find the best way to check font size consistency is to grab a chunk of Lorem Ipsum (www.lipsum.com) and let it run nice and wide (1000px or more) across your browsers so you have around 20 words across the page. This way, even small changes in font size will tend to reflow the text.