Blog | Status Updates | About | Contact | Advertise

February 22, 2005 / Filed under: CSS

Here’s something I often confuse myself with...

When developing a web site, let’s say I declare my main font values with the body selector:

body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
}

This sets my entire site font to be 12 pixels, and Verdana – or the others, if Verdana is not available.

This means that any element without a pre–defined font size will inherit the 12 pixels/Verdana.

What ARE elements with a pre–defined font size?

Well, for example’s sake, all the header elements (<h1>, <h2>, etc.) have pre–defined font sizes – meaning if those elements are not styled differently, they will retain their own font sizes.

So, let’s say I’m using an <h2> element.

After looking at it, I decide it’s too large, and I just want to bump down the font size a bit. So, I go to my CSS file, and type out this:

h2 {
font-size: 90%;
}

When I preview it, back in the browser, I am shocked at the results.

The font size for my <h2> text is smaller than the normal paragraph text! It looks like it shrunk down 75%! What did I do wrong??

The answer is... since the <h2> elements are descendents of the body element, they inherit their parent’s values – font size values, in this case.

So... instead of my giant <h2> font size shrinking down just a bit – it actually started shrinking from 12 pixels. Understand?

In other words – 90% of 12 pixels.

To picture this more clearly, a 100% font size for the <h2> elements would equal 12 pixels. So, anything less than 100% would be smaller than 12 pixels.

Now... my <h2> elements are too small. Even if I set the font size to 100%, they are still only 12 pixels. What should I do?

Set it higher than 100%?

Sure!

I could feasibly set my <h2> font size to 110%, which would produce 110% of 12 pixels, which is just a little bit bigger.

I’m sick of all of these percentages. Too confusing. Is there a better way?

Yes, there is. em values.

em values are kind of like percentages, except you specify decimal point, or whole numbers, which offset the size of the element, in relation to it’s parent element.

So... this declaration:

h2 {
font-size: 100%;
}

... is the same as saying this:

h2 {
font-size: 1em;
}

To say 110%, you’d write 1.1 em.

Make sense?

Sure does, Matt. Thanks!

I will stop talking to myself now.

table tr th,
table tr td
{
    font-size: 1em;
}