Matt Snider JavaScript Resource

I haven noticed that a lot of CSS Frameworks specify odd percentage amounts for various tags. For example, in my base.css, I set the H tags to these values (I believe I got them from either Tripoli or YUI):

h1 {
	font-size: 138.5%;
}

h2 {
	font-size: 123.1%;
}

h3 {
	font-size: 108%;
}

Many times, the only explanation give is that after much testing, we determined that these were the optimal values for all browsers. I have always wanted to know a little more than that, so I created a test page that generates elements at a variety of font-sizes after applying reset.css. Using this tool, I have been checking different fonts on different browsers at a variety of sizes. I have not come to any conclusions yet, but you may find it valuable.

Font Size Test

It is a little slow, as I use JavaScript instead of a server-side language to insert the HTML elements, but it does the trick. I have been looking at the page in several browsers (FF2, IE 6 & 7, Opera 9, and Safari 2), then changing the zoom and/or relative font-size to see how well different percentages scale. Let me know if you discovery anything interesting ^_^.