How can I get standard cross browser font-sizes?

A short while ago I was overjoyed to rediscover an article that I lost track of long ago. I read a book endorsing the classic ALA Keyword Approach, but figured I’d follow up on the research a bit further, as I had an inkling that using a % in the body and em as the unit for elements and classes would be superior. The %/em avoids some opera issues, and makes base font size changes a bit more practical.

The incremental differences article shows at what points different browsers decide to scale text. Unfortunately the browsers tested were from, well, February 2003. Using the browsers on hand I worked on providing a rough update to the guide.

60%, 69%, 76%, 83%, and 89% should render fonts at the same size across all major browsers.

Using 60% is the most friendly to those used to pixel units, as 1.4em is close to 14px, 0.8em is close to 8px, etc. 76% and 83% are probably the most logical choices if you wish to keep your paragraphs at 1em and then base other elements around that.

One downside of this method is users who use a custom stylesheet to set a base font size will most likely end up with large fonts, which could make using 76% or 83% a more attractive option.

CSS code would look something like the following:

body { 	font-size: 76%; }p { font-size: 1em; }h1 { font size: 1.8em; }h2 { font-size: 1.6em; }li { font-size: .9em; }/** etc **/