Browser Font Size Madness!

Alright so I recently had some discussions and researched a bit about font sizes in browsers. There are some really important findings here, but I will summarize as best as I can. How does the Browser Decide on a Font Size? Firstly, the default browser font size across all modern day browsers is 16 pixels. This is good to know when you are trying to calculate your relative font size. Secondly, another calculation is made in regards to your font sizes, and if and if you are like me, you are using EMs. Take your base font, and multiply by your EM value, so 1.1 em * 16 pixels = 17.6 pixels. All browsers (except IE) will correctly round up to 18 pixels, so your result would be 18 pixels. IE (seemingly) truncates the decimal value, and interprets 17.6 as 17 pixels, thus giving a one pixel difference! Make sure when you specify a relative font size, calculate it, and make sure its going to be the same in IE. The Scaling Issue (Thanks Stephan) http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ Due to an issue with scaling, it's best to at least start your font size (base font size) with a percentage (%). The code below will set the base font to 12 pixels. body{font-size:75%;} Using a percentage first is important because of scaling, and IE's browser font settings. After you set the % based font size, typically on the body, the EMs will work very nicely. Also most other web developers I have talked to suggest starting off with a simple base font, that makes the em calculations simple: font-size: 62.5% Everything after that in EMs (1 em ~= 10 px) (1.1 em ~= 11 px) (1.2 em ~= 12 px) and so on...