Proper use of em in your CSS

What is the difference?

An em is a relative measurement and a pixel is a static measurement. What this means is that the actual size of an em is not always the same, while a pixel is always the same size.

Why use em?

One thing is accessibility but the other is the fact that it will speed up your design process. If you use pixels and want to make all the fonts a bit bigger you have to change all the font sizes. However if you use em for font size, you can do this by changing the body font size and all the other font sizes will be resized accordingly.

When to use em and when to use pixels?

The best use for em is when defining font size. On the other hand it is much more practical to use pixels for defining the layout elements.

Proper use of em

As I said before, the base for the size of em is in the definition of body.

example:

body{
font-size:12px
}

Now the size of 1 em is 12 px.

The default browser value for em is 16px so by default if you want to get 12px you just enter 12/16=0.75em insted the 12px.

We can use this knowledge to set up our body font-size by entering

body{
font-size:0.75em
}

Now we have set the size for 1 em and it’s 0.75em wich is the same as 12px.

You’re all set to go! If you need help with px to em conversion just use this tool: px to em