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:
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};
