CSS font-size dialogue! Feb22 '05

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.

Categories: CSS

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info

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 " ... Read more.

Yeah, nested tables will cause some headaches with CSS, that’s for sure. Is the font-size smaller for tables, you’re ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Contact Matt

Similar Entries

Stats

97 unique visits since August 2008

Syndicate

Advertisements