font size: 0.85em???

They have: 20 posts

Joined: Nov 2005

I am looking over some css templates that look really nice and I would like to leverage the code. The big thing i do not understand is the font size. The types of codes I have in the template are:

h1 {font-size: 150%}

and

#header {font-size: 0.90em}

so the question is what is em and the h1 is 150% bigger than what? What is the reference here?

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

1 em is the approximate average height of the characters of your font. So .90em would be 90% of the inherited font size.

So 150% is probably 150% of the inherited h1 font size.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

No, I think it's 150% of the default font size for regular text. I normally use 90% for plain text and around 120% for h1. The default header size is pretty big, and I would definitely not want to make it bigger.

em is similar but it's more like describing a ratio between the default font size (or inherited font size) and the size you want to use. So if you want to keep the default size you would use 1em. If you want to go down to 9/10 of that, you'd use .9 em etc. (I think???? I'm trying to find a good explanation of this...)

Here's a good thorough article:

http://www.clagnut.com/blog/348/

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

Ah, thanks for the clarification on the h1 percentage, Megan. I wasn't sure on that one. Thus the use of "probably." Smiling

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

1em = the width of the letter "m" in a font at 12 points - that's why it's called "em."

So, 0.9em would be 90% of 12pts; 1.1em would be 110% of 12points

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.