Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    font size and line height irregularity.

    Hi,

    I have discovered that I may have set my css up wrongly.

    Should the body element be set to a fixed size, say 12px, or 1em?

    I seem to get better result with body {font-size : 12px }, as the base size for a page and then to vary it as appropriate with either {font-size : 0.8em} or {font-size: smaller}.

    :explanation:
    I had set the font-size like this:
    body {font-size:1em}

    I thought that this would enable individual users to see the size as they choose, using either their own browser settings or adjusting to larger or smaller (in the browser), depending on their requirements. However, a customer rang today and said that the lines looked squashed because the tops of tall letters, were touching the tails of other letters on the the line above. So I have now set the body {font-size : 12px} and then used em's throughout the rest of the page. It still looks fine in my browsers but, is this correct/best?

    bazz
    Last edited by bazz; 02-26-2008 at 12:27 PM.

  • #2
    Regular Coder maxvee8's Avatar
    Join Date
    Feb 2008
    Location
    UK
    Posts
    185
    Thanks
    19
    Thanked 18 Times in 18 Posts
    hi i think you right setting you fonts to em, and making structure px, what i think you may want to try is in your html body set

    CSS:

    Code:
    html, body{font-size:80%;} 
    
    h1{font-size:1.7em;}
    h2{font-size:1.5em;}
    h3{font-size:1.3em;}
    p{font-size:1.2em; line-height:1.2em;}
    so you have to set your font sizes then for the attribute you need 1.2 em is about 12px supposidly, thats how i did it. and set the line heeight to what ever you neeed.

    get back to us if you get undesired results!


    i did sum more research on this and ems are dynamic meaning you can resize them say for accesability, px are fixed at that size and should be used for precision if you have fixed width containers.

    http://webdesign.about.com/cs/typeme.../aa042803a.htm

    info here about that sort of stuff as well!

    Max
    Last edited by maxvee8; 02-26-2008 at 12:54 PM. Reason: line height added

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    No.

    IE doesn't like fixed font sizes or ems as the first measurement. If you want to adjust the line-height, I would use a unitless measurement.

    Code:
    body {
      font: 100%/1.8 'lucida sans unicode', verdana, sans-serif; /* 16px */
    }
    /* It's okay to use ems from here on */
    p {
      font-size: .817em; /* 13px */
    }
    And setting both html AND body to 80% would make it just about 10px on default sizing. You might as well just put .625em to begin with.

    Anyway, if you want to see what ems can REALLY do, try resizing the text on the link in my sig. Pretty.
    Last edited by Apostropartheid; 02-26-2008 at 04:47 PM.


  •  

    Posting Permissions

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