Grow your CSS skills. Land your dream job.

What’s the benefit of using em’s instead of px’s?

  • # September 10, 2008 at 12:07 pm

    What’s the benefit of using em’s instead of px’s?

    # September 10, 2008 at 2:27 pm

    em’s can grow when you try to resize the text in your browser. Pixels can’t. So if you have someone who can’t read the text on your site, they can resize it if you use em’s. there may be other reasons. But this one is the only one i know about for sure

    # September 10, 2008 at 3:52 pm

    That’s true, but only for IE 6 and below. Any more modern browser can resize PX values just fine. EM’s is a "relative" sizing technique, so it can be useful when you control the sizing of your page as completely relative to other things on your page. Like you set a base size for your type, then you can make a box that is exactly 20 times that base size in width, with line spacing that is exactly half that base size, etc etc. It’s that kind of relative thinking that EM’s allows you to do.

    # September 11, 2008 at 8:13 am

    Hi Chris,

    You said that the modern browsers can resize px font size values but IE6 and something below can not. So what do you think? In my opinion I think that px values are okay for your own website, but if you create something for business I think the better way is to use em instead of px.

    For my opinion I refer to the W3C Counter Global Stats. Okay IE 7 is also widely spreaded but I think its not a big problem to use ems.

    bye,
    ANeuby

    # September 11, 2008 at 2:30 pm

    I have just been struggling with the same dilemma. While it’s not quite true that pixels cannot be resized in IE 6 — they can, but only with difficulty — I found that percentages or EMs are not consistent across browser-land.

    Fortunately, all versions of IE give the same results at certain percentage sizes. Since IE is the only browser that won’t re-size pixel-based text, I have decided to use percents for IE, and pixels for other browsers.

    FWIW here are the results I came up with (at 96 DPI) –

    Points vs. Pixels and Percents

    6pt nonpareil 8px 50%
    7pt minion 9px 57%
    8pt brevier 11px 69%
    9pt bourgeois 12px 75%
    10pt long primer 13px 82%
    11pt small pica 15px 94%
    12pt pica 16px 100%
    14pt english 19px 119%
    16pt columbian 21px 132%
    18pt great primer 24px 150%
    21pt double small pica 28px 175%
    24pt double pica 32px 200%
    36pt double great primer 48px 300%

    Be aware, though, that 100% in IE is 16 pixels on many PCs, but is 20 pixels on most high-definition laptops like mine. Other platforms, too, may not be running at 96 DPI, so don’t depend entirely on this "100% = 16 pixels" formula.

    # September 12, 2008 at 11:18 am

    Few mounts ago I public Emastic – CSS Framework based on ems. http://code.google.com/p/emastic/
    Why I picked ems to be play key part in this Framework?

    First better usability if you are using IE6 or Firefox2. Also I think that in Firefox3 text resize is default and you must manually change it in order to resize all page. One thing particularly cool about em’s is by controlling the font-size of body you can resize all the page.

    Let’s say you have page like 960 px in ems and the font-size:100% someone comes with 800×600 monitor and by changing font-size:~80% all page size will change.

    # August 20, 2009 at 5:54 am

    What is the exact css code to put a background behind a centered div tag? I want to center my website and behind the centered div tag i want to have a plain gray background but i can’t seem to get any codes to work. Please give me the exact codes and where to put them…i dont know if i should put it in a css or right in the page code.
    __________
    matrimonial

    # September 12, 2009 at 11:48 am

    Pixel is a solid unit of fixed size, it is not designed for fonts, which are usually defined in Points. Pixel is a measurment that should never be used for text as it is meaningless for text. It is like measuring weight using inches/centimeters.

    Pixel, Point etc are fixed sizes. Some users have poor eyesight, or maybe sit farther away from the monitor. Fixed sizes set the text size to something you choose and not what the user wants or needs. Firefox and Opera will enlarge the text in fixed units, IE6 will not, so the sizes can not be changed for them.

    EM and % are both flexible units based on the chosen font and size the user has in their browser, this means each user will see the size as they chose it and not as you chose it. The text size can be changed to fit their wishes/needs as it is flexible.

    But that has it’s price, you must create your web site to be flexible as well. Normally you use em/% for text, &/pixel for width of structural elements. However if you create say a menu flexible, then the box holding it must be flexible as well to stretch with it or at larger text sizes it will overspill. So is a case like that you can define the box in em as well so that it grows at the same rate as the em text when enlarged.

    # September 13, 2009 at 7:01 am

    example:

    Code:
    body{font-size:10px;} //keep at 10 all sizes below correct, change this value and the rest change to be e.g. 1.4 of this value
    #1{font-size:1.2em;} //12px
    #2{font-size:1.4em;} //14px
    #3{font-size:1.6em;} //16px
    #4{font-size:1.8em;} //18px
    #5{font-size:2em;} //20px


    body

    1
    2
    3
    4
    5

    by changing the value in body the rest change automatically to be a kind of times the base value…

    10×2=20
    10×1.6=16 etc

    you could have the base value as 8px… so
    8×2=16
    8×1.6=12.8 //may be rounded by browser

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