SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast xor's Avatar
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Question about 'em'

    I'd like to know more about using ems in my styles. I know they are a unit of measurement, and I gather that they are good to use when you want pages to resize nicely in browsers. But I'd also like to know lots more, like... how big is an em? What are the advantages/disadvantages of using ems?

    I also feel like I'm in the position of "you don't know what you don't know" about ems, so if you'd just like to go on about them in any other respect, I'm happy to read it

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An em is equal to the size of the current font. So everything is relative to whatever the current font is. 1.2em is 1.2 times bigger than whatever you have it set at at the moment.

  3. #3
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My suggestion about em is don't use em, they are more of a hassle than a benefit in my opinion. Every browser Ive used (FireFox, IE, K-Meleon, and Opera) all resize PX fonts if you increase font size.

  4. #4
    SitePoint Enthusiast xor's Avatar
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lostseed
    My suggestion about em is don't use em, they are more of a hassle than a benefit in my opinion. Every browser Ive used (FireFox, IE, K-Meleon, and Opera) all resize PX fonts if you increase font size.
    Thanks LostSeed. I wasn't sure that IE resized pixels. I thought it did but then I kept reading that it didn't and pixels were bad to use because they didn't resize. I wondered if it was more a matter of IE users not knowing *how* to change the the font size in their browser. I do prefer them though. So it's really good to know pixel sizing works in all those browsers.

    I laughed at the pun too!

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xor
    Thanks LostSeed. I wasn't sure that IE resized pixels. I thought it did but then I kept reading that it didn't and pixels were bad to use because they didn't resize. I wondered if it was more a matter of IE users not knowing *how* to change the the font size in their browser. I do prefer them though. So it's really good to know pixel sizing works in all those browsers.
    I'm afraid I have to differ with LostSeed. Set your font-size in % on the body and then scale with either ems or % and you can achieve similar results cross browser. Ems may take a bit more getting used to when used for setting dimensions on elements but it's like any aspect of CSS, once you've got a handle on it, it's not a problem.

  6. #6
    SitePoint Enthusiast xor's Avatar
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Tyssen
    ...Set your font-size in % on the body...
    Ok... maybe I'm misunderstanding, but if I set the font-size in % in the body how do I set the base font size? It seems like the font-size will then be that set by the browser... often it's something like 16pt by default. But then it's really hard to know what the user is seeing?

    And setting in the body... is that body within the HTML or body style within the .css?

    So do you have different stylesheets for different browsers/platforms in order to get the % or em scaling to be similar between different configurations?

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xor
    So do you have different stylesheets for different browsers/platforms in order to get the % or em scaling to be similar between different configurations?
    No, like I said, do something like this:

    Code:
    body { font: 62.5%/150% verdana .... }
    (second number is for line-height) and you'll end up with fairly consistent results across all browsers and then you size the rest of your text up and down using either ems or %. I don't always use 62.5% but with the default font size being about 16px, it brings it back down to 10px which then makes 1em equal to 10px (useful if you're one of those who likes incrementing in 5 or 10).

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lostseed
    My suggestion about em is don't use em, they are more of a hassle than a benefit in my opinion.
    That's a very unhelpful suggestion. Using em (or %) is essential for scalable web design.

    Quote Originally Posted by lostseed
    Every browser Ive used (FireFox, IE, K-Meleon, and Opera) all resize PX fonts if you increase font size.
    The only way to make IE scale pixel-sized text is if you delve deep into the Options dialog hierarchy and find the right checkbox to tick. By default, IE/Win – easily the most used browser on the 'Net today – does not scale px-sized text.
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Enthusiast xor's Avatar
    Join Date
    Jul 2001
    Location
    New Zealand
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks Tyssen. Now I get it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •