Grow your CSS skills. Land your dream job.

em: how do you start?

  • # December 30, 2008 at 12:28 pm

    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,

    # December 30, 2008 at 1:38 pm

    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.

    # December 30, 2008 at 2:10 pm
    "falkencreative" wrote:
    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.

    well I had this by my side for calculations, much easier:
    http://pxtoem.com/

    although I find it much easier in terms of using em as you set one size the rest does it for you.

    I find some sites say you can margin and pad with em, I think that is probably harder to understand, as why would you want to pad in terms of text size???

    # December 30, 2008 at 2:35 pm

    I actually don’t set anything on the body, since it’s all just relative to the user’s browser anyways.

    I usually just throw down a .8em for main text, 1em and upwards for the headers.

    # January 5, 2009 at 3:59 am

    Hi,

    In numerous sites in the body it says somthing like font: 62.5%. Why would one use a percentage here? I’ve seen Chris using this a lot.The size of the fonts used in the HTML then depends on the the browser settings, right? Normally browser use 16px as a default. 62.5 % would set the font size to 10px and the use of em is very easy (1.2em would result in 12px).

    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….

    gr. Bert

    box
    # January 5, 2009 at 9:21 am

    With all newer browsers using a zoom action to make the entire page bigger by pixels, rather than only making the font larger – there’s a good argument for not using ems at all. I have returned to pixel-based websites for this reason, while offering up a basic version of a site for users of older browsers.

    # January 5, 2009 at 12:07 pm
    "box" wrote:
    With all newer browsers using a zoom action to make the entire page bigger by pixels, rather than only making the font larger – there’s a good argument for not using ems at all. I have returned to pixel-based websites for this reason, while offering up a basic version of a site for users of older browsers.

    I have never seen any change in websites I have done with pixels when zoomed in, but never checked on all browsers, only IE & FF,but good thing with em is, change only the body font size and its all changed.

    # January 5, 2009 at 2:46 pm
    "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.

    # July 17, 2012 at 9:16 am

    “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?…

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".