SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is the body {font-size:62.5%} technique still current? Advisable?

    I was reading Sitepoint's Principles of Beautiful Web Design by Jason Beaird. He recommends a best practices technique for fonts. Beaird prefers to work in pixels to maintain exacting control over a design, but in order to avoid screwing IE6/7 users he resets the fonts with a percentage...

    body {font-size:62.5%}

    ...so that 1 em = 10 pixels. He then sets all of his font sizes in ems to provide graceful webpage functionality cross-browser while maintaining the control he likes.

    This sounds like a fantastic idea, but it's basically from 2006. Is it still current? Is there a better more recent technique?

    I realize a lot of people are starting to bail on supporting IE6, but my bias is to continue to support it, and I believe IE7 is unavoidable. What are your thoughts?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That doesn't necessarily make 1em equal to 10 pixels. It only does that where the screen resolution is set to that 1em is 16 pixels in the first place which pay or may not be correct.

    The technique of setting a percentage on the body is correct for fixing an IE bug but the percentage that you use can be any value and normally somewhere between 70 and 100% will work best.
    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="^$">

  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is some discussion on font sizes: http://www.sitepoint.com/forums/show...hreadid=565469

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for linking to that thread, Ben. Saves me the trouble of having to find it.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Right or wrong the only way to be (half) sure that the font size you define is what the user sees is by defining a pixel font size for the body as the starting point. From then on you can define percentages as required.

    There is a method that I posted in the thread mentioned above that shows how to do this even for IE6 and still allow the user to scale the text with the browser controls.

    I find this method combined with the correct percentages to be the most reliable cross browser. (Too many of the other methods use percentages that will give say 13px in one browser and then 14px in another because of rounding errors or guessed percentages. Remember that simply saying xx&#37; of a font-size is not going to give an exact measurement and if the measurement works out 12.9px then you get 12px in some browsers and 13px in others.)

    However, a lot of people would argue that changing the base font size is taboo from the start and therefore it's a choice you have to make for yourself. I believe that setting a reasonable start size is a reasonable approach but many would argue otherwise.

    Of course the user can set their browsers to ignore any fonts or sizes I define and indeed just use their own stylesheet so ultimately there is never any complete control over this and neither should there be.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    After all the back-and-forth I've done on the subject, I've simply settled on font-size:100&#37;;

    I've updated/reflected that here...

  7. #7
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Thanks for linking to that thread, Ben. Saves me the trouble of having to find it.
    Not a prob, I had actually not seen it before (I don't think) it was an interesting read and seemed rather appropriate for this thread.

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find myself these days to not set a font-size on the body at all. I define the font-size in ems further down the sheet. Like Paul said, there's no right or wrong way i guess.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Luki_be View Post
    I find myself these days to not set a font-size on the body at all. I define the font-size in ems further down the sheet. Like Paul said, there's no right or wrong way i guess.
    Not setting a font size on the body means that Internet Explorer will incorrectly calculate font sizes where you have nested elements. You need to add a font size declaration of 100% to your body to fix that bug (it will not affect anything else).
    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="^$">

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Not setting a font size on the body means that Internet Explorer will incorrectly calculate font sizes where you have nested elements. You need to add a font size declaration of 100% to your body to fix that bug (it will not affect anything else).
    You mean the bug where IE has problems resizing text from medium (default) to large? As far as i know that bug occurs where you set an em size font on the body. In that case going to large in IE leads to a huge increase in font size rather than the gradual one expected. In that case you need to set a font-size of 100% on the html element. Or are you talking about another bug?

    Besides that, i use em based IE expressions to work with min-width. The expression extracts user preference from the browser so no font-size on body/html must be set. Forgot to mention that in my first reply
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The bug is one where you have nested elements both specifying relative sizes where IE then incorrectly calculates the font size for the content in the inner element. Nothing to do with resizing at all.
    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="^$">

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The bug is one where you have nested elements both specifying relative sizes where IE then incorrectly calculates the font size for the content in the inner element. Nothing to do with resizing at all.
    Ah, i see ... is that bug documented somewhere? It's a new one to me
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #13
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    After all the back-and-forth I've done on the subject, I've simply settled on font-size:100%;

    I've updated/reflected that here...
    Heard that, Eric. But I'm going to try Paul's 13px reset to see how it works. I gave up on trying to figure out that 62.5% yeehah a long time ago. My inner math geek isn't very good at handling, well, anything, so it always confused the hell out of me.


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
  •