How font size works in CSS?

[sahota]

Hi All,

This must be the very simple question for all there.

If I set size for <h1> using

h1 {font-size: 1em}

then try displaying a h1 text. It is displayed as normal text not as default h1 font size of browser? Why as 1em means relative to default of browser?


Thanks in advance for spendinf time on this very simple question.

[Pheonix]

1em = 100% the size of the parent font
.5em = 50%
1.5em = 150% etc

[surfthegecko]

Hi,

Just a handy little note but I believe that most browsers have a default size for 1em = 16 pixels (approx).

When using em's you should really set the body font-size to 100%:
eg body {font-family: verdana, ariel, sans-serif; font-size:100%;}

Gecko.

[Pheonix]

That is not how em works at all...
em defines the text size in relation to the font size of the parent element.

[Antwan]

Originally Posted by Pheonix

That is not how em works at all...
em defines the text size in relation to the font size of the parent element.

Correct, and I think the overall em is based on your browsers default font size

[snow]

em is based on the width of the capital letter 'M' of the parent font...

so 1em is one 'M', .5em is half that size as pheonix said.

[ukgeoff]

You will find what you need to know about ems if you look in the sticky at the top of the css forum.

Edit: This sticky is entitled, 'CSS query - start here'.

Why does nobody seem to understand this?

[Dapandyman]

lol i have done that so many times...... i go to that first now

[Pheonix]

This thread is a year old o.O I don't understand why its been brought back

[Ryan Fait]

It's a ghost.

[Pheonix]

/calls an exorcist

[Ryan Fait]

Oh no! Not one of them!

[Daniel]

wooooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooooooooooooooooooooooo

[moojoo]

0.9em is a good general font size with 0.85em or so for large scale fonts such as verdana.

[Ryan Fait]

I've heard a lot of controversy over this, but do you think it's bad to declare font-size: 70%; in the body tag? It makes it way easier to use intergers for paragraphs and headers.

[ukgeoff]

I believe the size you set in the body tag should be the default size for your site.

Coupled with the fact the the end-user has the option in their browser (well in any decent browser) to set both the normal and minimum font size, this default should represent 1em but set as a percentage - see sticky.

[Ryan Fait]

Er. I'm confused. When you say "1em but set as a percentage," that should just be 100%... As for the sticky, I don't see anything relevant to what I was trying to say.

[ukgeoff]

I was referring to setting the body font size to 100.01% because of a quirk in IE.

[Ryan Fait]

Does using 70% fix the quirks? I'm having a hard time finding detailed information on the bug.

[ukgeoff]

Here is one reference:
http://css-discuss.incutio.com/?page...xplorerWinBugs

Google with '+IE +font +sizing +bug +100%' will get you quite a few more.