SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2001
    Location
    Kansas City, MO
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick question about font size

    From what I understand the default font size in most browsers is 16px. That explains why a lot of people use font-size: 62.5%, which would set it to 10px and is easier to convert to EMs.

    My issue is when I set the font-size for the body to 62.5% the text is super small but when I set it to 10px it is bigger. If I understand it correctly shouldn't they be the same?

    I am probably doing something wrong and would really like to figure it out.

    Thanks

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    From what I understand the default font size in most browsers is 16px.
    If you're using IE on Windows XP with 96dpi set and no changes to anything... seriously even though most of my browsers are set somewhere around the equivalent of 16px, I'm running Gnome Desktop which makes everything in Firefox bigger compared to Win/96dpi meaning text will wrap over here where it doesn't on the dev's Winblows machine.

    And then you have the font... did you set Verdana? Georgia? Larger x-height than say Arial or Times New Roman. And I get to set that in my browser, you only get to suggest it : )

    In any case you obviously aren't running the default something. Weird screen rez, weird font, weird dpi, weird browser. Like most of us : )

    Why one is better off setting font-size on the body to 100%. The whole 62.5% idea needs everyone to have the same dpi and default font setting. Something as unreliable as the chances of my sock colours matching.

    My issue is when I set the font-size for the body to 62.5% the text is super small but when I set it to 10px it is bigger.
    Now you know how we all feel when trying to actually read something on all those sites who took that Truth as Gospel (too bad it was pushed by some big names in web developement... like Dan Cedarholm and others... people who we trust because they Know web design). This is why it's not recommended to do 62.5%... you do want to use a % though, on the body, to get around an IE resize bug.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Andwise View Post
    From what I understand the default font size in most browsers is 16px. That explains why a lot of people use font-size: 62.5%, which would set it to 10px and is easier to convert to EMs.

    My issue is when I set the font-size for the body to 62.5% the text is super small but when I set it to 10px it is bigger. If I understand it correctly shouldn't they be the same?
    As Poes says, the default all depends on your system, setup and settings. That's particularly true for % but also true for px as well.

    Setting a base font size that is supposed to equal 10px really isn't worth the effort. For a start, you often run into unintended inheritance effects, bugs and (ahem) features. For a second, you can't control the OS and browser settings on every user's computer, so you can't guarantee they will get the exact same font rendering that you're seeing on yours - so you have to make sure your design is flexible enough to cope with different font sizes. For a third, if you start with a base size of 10px then there's a lot of temptation to think that that's a suitable text size ... it isn't. You should not generally reduce the size of body text much (if any) below the default user setting. And for a last ... what's wrong with working out the font size relative to the default? You can still use %, which is relative to the parent, and calculations really aren't that difficult to figure out, bearing in mind that you're never going to get it pixel perfect!

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yeah for box sizing in em's I used to just throw a background colour on the box and throw some random number on it and look at it : ) now I have general ideas for what sizes work for stuff and I can usually whip them out.

    For fonts I can just leave a lot of stuff at 1em (the default if I set font-size to 100% anyway) so if anyone needs to be larger (headers), something over "1", anything to be smaller, something less than "1". I don't set so many font sizes and then I don't get the nesting problems you can get with %/em.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Apart from the very good points raised above the only other thing you may be doing wrong is nesting elements that have had a percentage value applied to them

    e.g.
    Code:
    div{font-size:85%;}
    Code:
    <div><div>tiny text (85% of 85%)</div></div>
    The size of the text on the inner div will be 85% of the size of its parent which is 85% of its parent. Percentages/ems will compound on nested elements when applied as above (think about nested lists etc.)

    The way around it is to do something like this.

    Code:
    ul{font-size:80%}
    ul ul{font-size:100%}
    Basically using percentages/ems means that you create a relationship between the font sizes on your page. There can never be any real correlation between actual pixels sizes that others may be seeing on their monitors for the many reasons as already described above.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Any attempt to equate pixels and em is misguided.

    While there is a good reason to set a &#37; for font size on the body tag to negate an IE bug 100% is just as good for the purpose as any. All other sizes can then be set in em and will then all maintain the same relative sizes as people adjust the font size in their browser.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •