For Designers

CSS: em vs px

So what’s exactly the difference between em and px? Why using one instead of the other? I’ll try to answer that questions…as much as I can of course.
First, the em unit is a relative size. It means that it’s calculated based on the font size of the parent element. E.g., if an element has a font size of 12px, then all the other child elements will have the same size. So basically child elements have a 12px font size or 1em font size. If you change the font size in the child element to, for example, .75em then the computed size will be .75 x 12 = 9px.
Relative size also means that if user changes the font size in his browser then whole interface will resize too.

A little bit of history?

An em was the height of the metal body used to cut a single letter for a specific font. One em is sometimes said to be equal to the width of a capital “M” in a particular typeface, as the “M” was commonly cast the full-width of the square “blocks”, or “em-quads”, which are used in printing presses.

Setting body font size

First thing you need to know is that most browsers have a default “medium” font size of 16px. So 1 em=16px. Starting from there, there’s usually two different options. Some suggests to set the <body> font size to the font size for body text or equivalent of 10px while some suggests to leave it at browser default. I usually use the browser defaut but I understand that using 10px as a reference will make calculating child size way easier.

body{font-size: 1em;}

Of course, you’ll probably notice that Internet Explorer has a problem with that. It will grow or shrink fonts out of proportion instead of gradually resizing. Luckily, there’s a simple “fix”:

html{font-size:100.01%;} body{font-size: 1em;}

So you see that odd 100.01% value for the font size. It’s a little trick that compensates some browser bugs. Opera will draw a default font size of 100% smaller than other browsers. Also, Safari have a problem with 101%. It seems that 100.01% is the best suggested value.

“Elastic” Containers

Now that your main container is set to 100%/1 em, here’s how you need you calculate: 100% = 1em = 16px so if your main container is, let’s say 900px it’s gonna be 900 ÷ 16 = 56.25em.

1 ÷ parent font size x your pixel value = em value

Do the same thing with every layout container that you want to use. I know, this is a lot of calcul, but don’t worry here’s a little tool to help you:

Em calculator

Styling texts

Now that you understand the basics, let’s use it for typographic styles. Apply text sizes to all you headings (h1 to h6), your forms, lists,etc…

html{font-size:100.01%;} body{font-size: 1em;} h1{font-size: 1.25em;} /* displayed at 20px */ h2{font-size: 1.13em;} /* displayed at 18px */ h3{font-size: 1em;} /* displayed at 16px */ h4{font-size: .88em;} /* displayed at 14px */ h5{font-size: .75em;} /* displayed at 12px */ h6{font-size: .69em;} /* displayed at 11px */ p{font-size:.75em};

The problem

Let’s say you have an html file like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>100% height page</title> </head> <body> <div id="wrap"> <h1>100% height in every browser</h1> <p>This is an example of 100% height page.</p> </div> </body> </html>

And a css file that looks like that:

body{ margin:0; padding:0; } div#wrap{ height:100%; background:#ccc; width:850px; }

In that example, you will see that the content in my #wrap div doesn’t strech to the height of the page, and even if you set the height to 100%.
The problem is that you’re telling #wrap to be 100% of the content it’s in. So basically 100% of the body.

The solution

So let’s change the body and see what happens:

body{ margin:0; padding:0; height:100%; } div#wrap{ height:100%; background:#ccc; width:850px; }

Here, it’s exactly the same problem than before. So let’s fix that, this time telling the parent box to be 100% also: html.

html,body{ margin:0; padding:0; height:100%; } div#wrap{ height:100%; background:#ccc; width:850px; }

Still doesn’t work. Seems that the solution is to set the min-height to 100% to fix the minimum height to 100%. Works in Firefow but Internet Explorer doesn’t understand that.
So here’s the trick:

html,body{ margin:0; padding:0; height:100%; } body{ background:#ccc; } div#wrap{ min-height:100%;//ignored by IE height:auto!important;// for Firefox/Safari/.... height:100%; background:#ccc; width:850px; }