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.

Popular Pages

  1. Fast rounded corners in Photoshop (7424 recent visits)
  2. PHP – passing variables across pages (2558 recent visits)
  3. JavaScript set selected on load (2414 recent visits)
  4. Removing all child nodes from an element (1828 recent visits)
  5. Firefox 3 smart address bar: wildcard search (1755 recent visits)
  6. iPod songs out of order? (1314 recent visits)
  7. Britney - Everytime piano tab (1138 recent visits)
  8. MySQL LEFT JOIN syntax (884 recent visits)
  9. Firefox 3 smart address bar: wildcard search (722 recent visits)
  10. Date difference in MySQL (651 recent visits)

Similar Entries

Stats

31 unique visits since July 2008

Syndicate

Advertisements