As much as I’m proud of the Typetester’s popularity and the recent revival of typography for screen, there’s still significant number of web designers, who are confused about the TT’s base font size. Until I place default sizing control into TT’s interface, here’s a quick clarification. The base size control is now added.
The base font size of the TT is 10px, which means 1em is 10px, 1.2em is 12px and so on.
The ems for the screen are actually multipliers of the document’s base font size. The good practice is to set document’s font size to 10px (or if you want it to be resizable by the Internet Explorer users, set it to 62.5%).
body { font-size: 62.5%; }
Once you fix your global sizing (which is 16px by default in most of today’s graphic user agents), it’s easy to multiply textual elements with ems.
body { font-size: 62.5%; /* 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }
...
The reason behind setting the body element’s font size to 10px, is the ease of multiplying everything else with round number 10. If we’d set font size to 16px (or 100%, or not set it up altogether), the 1.1em would be 17.6px, which is pretty nasty number to work with, since the screen can’t display 0.6 of a pixel.
Still not convinced? Try calculating what would be font size in ems, if we’d want our heading in 18px?