SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: em vs. px ??

  1. #1
    SitePoint Addict smittenbite's Avatar
    Join Date
    Jul 2005
    Location
    Friendswood
    Posts
    397
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    em vs. px ??

    i tried to put the font size in em's on my website but it didnt work at all, it seemed like it just went to the default size (whatever that was) from the browser. i had no other instructions in my css about font except just the two lines with the font name and size.

    then i changed it to px and it worked just fine and changes as im changing it (which em's didnt do). i tested this in firefox. does anyone know why it didnt work out with defining it in units of em??
    nothing.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We would need to see the code you tried in order to answer your question.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Addict smittenbite's Avatar
    Join Date
    Jul 2005
    Location
    Friendswood
    Posts
    397
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    body{

    font-family: 'Trebuchet MS', Verdana;
    font-size: 11px; /* this wouldnt work when i had it at 1em, but it works as any px */
    }
    nothing.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what font-size:1em on body should do, unless you specified font-size on html.

    I suggest you read these:
    How to size text using ems
    http://www.thenoodleincident.com/tutorials/typography/
    CSS Font Size Explained
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Member JMorris's Avatar
    Join Date
    Sep 2005
    Location
    West Virginia, USA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I'm not mistaken, 1em on body = 12px, therefore, every child will be relative to the parent (body) element.

    For example...

    body {font-size:1em;}
    h1 {font-size:2em;}
    h2 {font-size:1.5em;}
    h3 {font-size:1em;}
    .mediumfont {font-size:0.85em;}
    .smallfont {font-size:0.75em;}
    .x-smallfont {font-size:0.65em;}

    You can also define body {} as a fixed value, like 14px and all em values will be relative to that as well, but it's not considered "best practices".

    I ran into this problem as well. When I defined body {}, everything else fell into place.

    Hope that helps.

    James

    Edit: Read what Kravvitz suggested

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most, but not all, browsers have a default font size of 16px. So on body, assuming a font size is not specified on html and that the default font size is set to 16px, font-size:1em is the same as font-size:16px.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Member JMorris's Avatar
    Join Date
    Sep 2005
    Location
    West Virginia, USA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh... Thanks for the correction. That explains some headaches I've had.

    Best Regards,

    James

  8. #8
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tha advantage of using a proportional size for a font is one of accessibility in that if you change the Text Size in your browser the proportional font will change. The problem is that it can really screw up your design which is why a lot of designers use px. This though limit accessibility. There are lots of threads on this and I am sure that my more learned SitePoint users can add more to this!

  9. #9
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks Kravvitz!

    Quote Originally Posted by Kravvitz
    That's what font-size:1em on body should do, unless you specified font-size on html.

    I suggest you read these:
    How to size text using ems
    I have just read Kravvitz links - make note, always read his links! I learnt loads! Thanks Kravvitz! Never knew I could do that modify ems like that.

  10. #10
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried to switch to EM units, but I've found it more of a bother than benefit. Nearly all sites I visit use PX units. Won't affect your SE ranking, but for usability I don't see the difference, the fonts still resize in IE, FF, Opera, and K-Meleon using PX or EM.


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
  •