Fat Agnus

Depending on who you are the size of typography is measured in different ways. In the world of printing it is Point - in Web it usually is Pixel.

Pixel seems to make the most sense when you are working with the web, because monitor resolutions are set in pixel and all graphic material is also set in pixel, so pixel is the natural way to go.

The problem with the pixel approach

All web browsers that I know of have the option that will allow users to change the size of the font, which is a pretty good thing in terms of usability, especially for people with visual impairments. However, in Internet Explorer this won`t work if you use pixel, I know that IE7 has a page zoom function that could be seen as a solution, but I would not recommend using pixel, as a rule of thumb.

Choosing Em as the solution

An em is a unit of measurement that it is relative to the parent`s element font size

The default font size, for probably all browsers, is 12pt which is 16 px and one em is therefore 16px. So if you wanted your font-size to be 12px then you should set it to 0.75em (12/16 = 0.75).

You would probably grow tired of having to do division all the time when you have to set a new font-size, so let`s look at an approach that will make it a bit easier.

The trick is easy, set the font size of the body element to 62.5%, because that will turn one em into 10px. This will make the division a little bit easier because now it`s just a matter of dividing with 10 instead of 16.

1
2
3
4
5
6
7
8
9
10
11

body { 
  font-size: 62.5%;  /* equals 10px */
} 
 
p { 
  font-size: 1.1em;  /* equals 11px */
} 
 
h1 { 
  font-size:3.5em;  /* equals 35px */
}

You can also use em to other things then just font size, so knock yourself out ;)