Firstly what are ems?

Ems are a unit of measurement in the field of typography, equal to the point size of the current font. This unit is not defined in terms of any specific typeface, and therefore is the same for all fonts at the given point size.

What are the benefits of ems?

The main benefit of ems is keeping the text consistent across all the major browsers when the user increases/decreases the size of the text on a web page.

How I use ems

Now before you start to use ems in your builds its important to note that my default 1 em = 16 pixels.

I have noticed that various programmers have there own methods to make their CSS ready for ems, personally I do the following:

Create a “html” tag make the font size 100%, I then create a “body” tag with the font size as 1 em this solves the notorious font re-sizing issues that IE6 users experience. Now my body tag has a value of 1 em, and remember 1 em = 16 pixels. From this I can now work out the em values that the rest of my text should have.

As I’ve never been one for maths, I tend to use a em calculator, one can be found here, others are out there, this saves you having to work out the value through using the em formula, alternatively you can look at a em conversion table such as the one found here. When using a em calculator you have to start by specifying the body value, which as stated above I’m going to have as 16 pixels (1 em). Once this value is specified we can then branch off it by creating a new nodes, in which we can enter a new value such as 14 pixels. When entering a new pixel value into a node you will be given in return the relevant em value, which in the case of 14 pixels will be 0.88 em.