Cross Brower Base Font Size, The Simple Way

Every time I start a new project I’m always trying to do things better than I did on the last project, it’s the way for all developers.

One thing that has always bugged me is trying to get the base text size the same across all browsers, but now I’ve totally dropped the idea of supporting IE 5.5 ever again I thought it might be easier now. After a bit of searching I didn’t really come up with any "Eureka!" posts where someone said "This is the way to do it", but eventually I came across a short post which says that using one of the following 60, 69%, 76%, 83%, or 89% as the font-size on the body should work out pretty well cross-browser.

The lack of a comment thread and the slightly strange site I found this on led me to investigate it further. So I made a test file with the following:

<div style="padding: 10px 0; background-color: #999;">
</div>

<div id="testCol">
	<div>Text in a DIV</div>
	<p>Text in a P</p>
	<h1>H1</h1>
	<h2>H2</h2>
	<h3>H3</h3>
	<h4>H4</h4>
	<h5>H5</h5>
	<h6>H6</h6>
	<table>
		<thead>
			<tr><th>TH</th><th>TH</th></tr>
		</thead>
		<tbody>
			<tr><th>TH</th><td>TD</td></tr>
		</tbody>
	</table>
</div>
<div id="sizeCol">
	<p id="p2">2em</p>
	<p id="p2_5">2.5em</p>
	<p id="p3">3em</p>
	<p id="p3_5">3.5em</p>
	<p id="p4">4em</p>
	<p id="p4_5">4.5em</p>
	<p id="p5">5em</p>
	<p id="p5_5">5.5em</p>
	<p id="p6">6em</p>
	<p id="p6_5">6.5em</p>
	<p id="p7">7em</p>
	<p id="p7_5">7.5em</p>
</div>

With the following styles applied:

/* normalise browser stuff */
html * {
	margin: 0;
	padding: 0;
}

/* normalise font size */
body {
	font-family: "Trebuchet MS";
	font-size: 83%;
	line-height: 1.35em; /* it seems line-height is bigger on windows by default */
}

p { font-size: 1em; }

h1 { font-size: 2em; }

h2 { font-size: 1.8em; }

h3 { font-size: 1.6em; }

h4 { font-size: 1.4em; }

h5 { font-size: 1.2em; }

h6 { font-size: 1em; }

#testCol,
#sizeCol {
	float: left;
	margin-left: 20px;
	display: inline; /* fix IE double float margin */
}

#testCol { width: 100px; padding-left: 20px; border-left: 1px solid #000; }

#sizeCol { width: 700px; }

#sizeCol p { float: left; width: 350px; }

#p2 { font-size: 2em; }
#p3 { font-size: 3em; }
#p4 { font-size: 4em; }
#p5 { font-size: 5em; }
#p6 { font-size: 6em; }
#p7 { font-size: 7em; }

#p2_5 { font-size: 2.5em; }
#p3_5 { font-size: 3.5em; }
#p4_5 { font-size: 4.5em; }
#p5_5 { font-size: 5.5em; }
#p6_5 { font-size: 6.5em; }
#p7_5 { font-size: 7.5em; }

Then proceeded to do a bit of browser testing, and by god it works pretty much perfectly. I tested in IE 6, IE 7, Firefox 2 (PC & Mac), Opera 9 (PC & Mac), Safari 2 and Camino 1 and the results are very consistent.

Note: The important stuff where all the magic lives is those first 2 lines on the body selector the line-height stuff was my addition - I noticed that it appeared to be quite different on the PC compared to the Mac (in my tests anyway).

So I have to thank Carl Uebelhart for the slightly strange post that opened up this lovely simplistic CSS.

Again, if you’re interested I have posted a slide show gallery of the results in all the browsers mentioned for reference.