Sizing text in ems
One of the nice things about using ems in our style sheets is that it will scale nicely with the default size of our users' browsers. So if, for example, they have changed their defaults to make everything larger than normal (because they have a hard time reading a the default text size), sizing in ems will mean that we will not force the user to an incredibly uncomfortable font size. On the other hand, it means that we will still have some control over how things look, which is important from a design perspective.
Why not use points?
Why do we not want to use points? Remember that a point is an absolutemeasurement—meaning that 12pt is the same size everywhere, no matter if we are looking at a 9 inch screen or a 19 inch screen. By using ems we can get around this issue.
How to size in ems?
But to know how to size things in ems we first need to know how large the default text size is. For whatever reason browser manufacturers defaulted on a size of 16pt for most body text. This is often too big, so very often we resize text down a bit. To do this, we need to make a few calculations. If we want our standard body text to be 12pt, then we need to do the following:
body {
font-size: 100%;
}
p {
font-size: 0.75em; /* 12 pt / 16 pt = 0.75em */
}
Note: we put value of "100%" on the body in order to get around a bug in IE 6 and IE 7 in which the largeness or smallness of resized text is exaggerated.
Let's say we want our headers to be 36 pt in size; how do we do that in ems?