CSS font-size dialogue!

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.

Comments/Mentions

# amanda at 7/5/2006 5:39 am cst

Aha, yes this should work as expected, but I have, in many cases still had the same results with the font size being screwy. Not so much with the "h" tags, but when I use tables. (I know, I know, TABLES??!! ...only when necessary lol) Anyway, when I have defined a font size (using em) in the body tag, it doesn’t seem to carry over when using tables. This, my friend, is a real pain because then I have to go back into my style sheet and add the font size property to the table tag.

Oh, and forget about nested tables. If you build a table inside of a table, you get the same thing...font size shrinks. It really makes a case for figuring out the best way to go tableless in all your layouts!!

# Matthom at 7/5/2006 6:21 am cst

Yeah, nested tables will cause some headaches with CSS, that’s for sure.

Is the font-size smaller for tables, you’re saying? I think I’ve come across that too. I don’t remember exactly how it was mended, but I imagine it could be fixed by just setting the table font-size to 1em:

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

Again, it could be a different problem all together.

Overall, though, I agree. Dealing with fonts inside a table always seems to throw some weird stuff out there.