em: how do you start?

[ikthius]

Something that has me stumped for a while now, is em….

well not really em in general, but how to start it off.

ok, going over it all again, and I noticed that a few places say that it sort of depends on what the font is set to in the browser, and that you can change that in the body part of your CSS.

so em will change the size of text relating to the relative font size: if body is 10pt and inner div is 1.2em then that div is 12pt, I get all that.

but my question is:
what do you declare in the body?
is it a measurement of pt, em, % or px?

reading that IE does not know anything about px,

[falkencreative]

These are the best resources I know on the subject:

http://www.clagnut.com/blog/348/
http://www.alistapart.com/articles/howtosizetextincss/

I am in the midst of redesigning my website, and moved it over from px to ems. It is a bit tricky!

In my case, I set my font size to 62.5% in my body tag (approximately 10px on most browsers) and then resized from there. For example, I want any text within my wrapper div to be roughly 14px, so I find that by doing this calculation:

child px divided by parent px (so, 14/10 in my case)

so I set my text size in the wrapper div to be 1.4 ems. If I have a h1 within the wrapper that I want to be 20px, I would use the formula again:

child px divided by parent px (so, 20/14)

and I should set the h1 tag to have a font size of 1.428em.

I’m sure there are other ways of doing this, and this may not be the "best" way to do things. If anyone else has an alternative way, let me know! The article explains it better than I can.

That is the basics of it… the article explains it better than I can.

[falkencreative]

"begetolo" wrote:

In my opinion it would make more sense to set the fontsize in body tag to font: 10px. This would give more reliable results. If, for some reason, IE, firefox, chrome or whatever browser is changing there default fontsize and you use the percentage trick, it would mess up your site. Sticking to for example to font:10px you don’t depend on the browser’s settings.

I don’t know of any drawbacks to this method, but there must be a reason why many developers use the percentage trick in stead of the ‘hardcoded’ 10px method. Maybe one of you can tell me why. I hope so….

I believe this is because if you start with a pixel based size and then adjust using ems, IE6 and 7 will see the px based size and refuse to resize the text. Defeats the purpose of using ems in the first place.

[nickmiddleweek]

“begetolo” said:
In my opinion it would make more sense to set the fontsize in body tag to font: 10px. This would give more reliable results. If, for some reason, IE, firefox, chrome or whatever browser is changing there default fontsize and you use the percentage trick, it would mess up your site. Sticking to for example to font:10px you don’t depend on the browser’s settings.
I don’t know of any drawbacks to this method, but there must be a reason why many developers use the percentage trick in stead of the ‘hardcoded’ 10px method. Maybe one of you can tell me why. I hope so….

I believe this is because if you start with a pixel based size and then adjust using ems, IE6 and 7 will see the px based size and refuse to resize the text. Defeats the purpose of using ems in the first place.

Then how about setting the body{ font-size: 10pt} and then use 1.1, 1.2, 1.3, 1.5em, etc for all other text… Use pt, instead of px and have more control over the pages… The only down-side I see to this approach is that we’d be overriding any default fonts the user specifies. I wonder what the stats are on users specifying their own font sizes?…

[Author]

Posts