Em Calculator

We all know that using pixels for typography is not the best way to go, thanks to IE 6. The facts are these: if you set your type in pixels, IE6 won’t enlarge it. Firefox and its friends will do it, even IE7, but if you want to enlarge some text while doing a presentation, or you want to read better that text where the designer used a small tiny little font, IE 6 won’t be doing it.

Enter the unit of measurement Em. In typography, the Em is the width of the M letter. It’s not specific to a typeface, but rather a measure of each font itself.  For the web, 1 em equals 16px, which is the default ‘Medium’ size for browsers. Then, you can set em sizes like:

However, keeping track of these sizes may be cumbersome, and if we have to deal with nested sizes, the whole process quickly becomes a nightmare. Fortunately, Em Calculator exists. It’s a nifty useful online tool for calculating em sizes, dealing with root and nested nodes.

With Em calculator, you can also set the base size, if you want it to be different than 16px. This setting is useful because you can also replicate this in CSS by adding:

[code=’css’]body { font-size:75%; }[/code]

This will set the base font to a 12px size, so now our 1em size will be 12px instead of 16px.

You can also specify the decimal places, and this relates directly to em numbers; 0,625 em renders in Firefox exactly as 10px, whereas 0,63, a rounding from 0,625, renders as 10.0833px. Browsers rounds to the next integer pixel number, so if you surpass 10px it will start rendering as a 11px type.  For example, testing in Firefox with 16px being the 1em size: 1.3 em = 15.6 px, FF renders it as 16px; 1.333 em = 16px, FF renders it as 16px; and finally, 1.4em = 16.8px, so FF renders it as 17px. Make sure you get your correct size using the proper decimal places.

I hope you find it as useful as I did, see you next time.