SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    what's the point of font-size:100% on body? doesn't seem to make any difference

    i use a combination of ems and %'s (i barely know why i choose one over the other to be honest) to size fonts and widths of a div say etc. all's fine. in a thread just recently someone was talking about using ems for fonts but putting font-size:100% on body first. i've never done that. a site i'm doing at the moment i've just put font-size:100% on body right near the start/top of the css cascade for each page. it's made no difference so far as i can tell.

    what's the point of font-size:100% on body?

    thanks.

  2. #2
    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)
    Hi,

    If you set the body font size at 100% then that will mean it will be at the default size which means that there will be no difference as you found out.

    It is commonly set at 100% to avoid the IE bug where ems are subject to an exaggerated scaling factor when text is resized. Setting the body in percentage kills the bug and allows ems to scale correctly.

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    i see so it's not intended to have any effect in any browser apart from fixing em sizes in ie (6 and 7 according to that article). right, worth doing then. great, thanks.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It doesn't hurt to have anyway. It should be common sense to not screw with anything. 100% means 100% of what it was supposed to be so logically it shouldn't cahnge at all (if it would change in your head logically, what value wouldn't change?)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personnaly, I go for something like that:

    Code CSS:
    html {
        font-size: 81.25%;    /* 62.5% -> 1em = 10px / 75% -> 1em = 12px */
    }
     
    body {
        font: 13px/1.615385 Verdana, Helvetica, Arial, sans-serif;  
    }


    Then I use ems for each different element:

    Code CSS:
    p {
        font-size: 1em;
    }

    It gives the same size of text in every browser. And it's easy to modify if needed.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Except you should avoid using pixels when using font size as IE users (all of them) won't allow text ressizing when set in pixels
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Tsedaka View Post
    62.5% -> 1em = 10px / 75% -> 1em = 12px
    That statement is only true sometimes. There are lots of factors that can affect how many pixels correspond to an em to start with - not everyone starts at 16px = 1em and no matter what percentage you set it to different people are still going to see your text at different sizes (even before they do anything to resize it).
    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="^$">

  8. #8
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well at least that works for IE7+, Firefox, Google chrome, Safari...

    Can you give me an example of browser which would not display a consistent font size please? I would like to make some tests

    Thanks!

  9. #9
    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)
    Quote Originally Posted by Tsedaka View Post
    Personnaly, I go for something like that:

    Code CSS:
    html {
        font-size: 81.25&#37;;    /* 62.5% -> 1em = 10px / 75% -> 1em = 12px */
    }
     
    body {
        font: 13px/1.615385 Verdana, Helvetica, Arial, sans-serif;  
    }
    The html rule is pointless because you over-ride it in the body with a 13px pixel size!

  10. #10
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tsedaka View Post
    Well at least that works for IE7+, Firefox, Google chrome, Safari...

    Can you give me an example of browser which would not display a consistent font size please? I would like to make some tests

    Thanks!
    For one example, I have set one of my browsers to default to a 13px (≈10pt) font size instead of 16px (≈12pt). Your 62.5% yields 1em as an 8px font size, not the 10px you expect; too small to render a complete glyph set.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gary.turner View Post
    For one example, I have set one of my browsers to default to a 13px (≈10pt) font size instead of 16px (≈12pt). Your 62.5% yields 1em as an 8px font size, not the 10px you expect; too small to render a complete glyph set.

    cheers,

    gary
    That's because there are lots of factors that affect the default size and so the 1em = 16px that some people assume in setting it to 62.5% to get 10px is wrong. Whatever percentage you are using to get 13px will give a font 25% bigger than you are seeing on some browsers.
    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 Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I don't give it a thought anymore. I just put font size 100&#37; on the body, and eyeball all the innards with em's.

  13. #13
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I just tried to set my default font-size to 10px on Firefox and nothing changes.
    (The body { font: 13px/1.615385 } makes sure it goes back to something normal).

    Maybe it can change something on some browsers, or in some special situations but... it's like trying to get a pixel-perfect website on IE6. That's just insignificant details.

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Tsedaka View Post
    Well, I just tried to set my default font-size to 10px on Firefox and nothing changes.
    (The body { font: 13px/1.615385 } makes sure it goes back to something normal).

    Maybe it can change something on some browsers, or in some special situations but... it's like trying to get a pixel-perfect website on IE6. That's just insignificant details.
    You should NEVER set font sizes in pixels. Doing so blocks IE6 users from being able to resize the text big enough to see (for example those who have their screen resolution set to a high level where there are possibly 500 pixels to an inch and they don't have a microscope to view your text through and need to make bigger in order to see it properly).

    Always use:

    body {font:100&#37;;}
    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="^$">

  15. #15
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know I was, and I imagine Tsedaka was also talking about setting the browser's default font size. I was not referring to setting the base size for a document.

    My example demonstrated that using a small percentage, e.g. 62.5%, as a base size presumes the user has not reduced his default size; a potentially fatal error.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  16. #16
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gary.turner View Post
    My example demonstrated that using a small percentage, e.g. 62.5&#37;, as a base size presumes the user has not reduced his default size; a potentially fatal error.
    I guess we're arguing the same thing for different reasons then.

    Setting the screen resolution to 1600x1200 on a 15 inch CRT monitor would would give you approximately 200 pixels to the inch and so even at 100% gives you text under 6pt in size. So assuming that the person can actually read 5pt text and so hasn't increased their default font size someone setting their page to 62.5% would reduce the text to just over 3pt in size which is sure to be too small to read.

    There is no what yo tell how big text defined in pixels will be since depending on screen resolution you could have anything between 72 and several hundred pixels to the inch. That 62.5% assumes that each pixel is one point in size (72 to the inch) and few people use screens where they have the resultion set anywhere near that these days. That's why the browser default is bigger than that - since at a typical screen resolution using 100% gives you around 9 - 11 point text (which is about as small as you would normally want to go).
    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="^$">

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    You should NEVER set font sizes in pixels. Doing so blocks IE6 users from being able to resize the text

    ..
    Not just IE6, IE in general (I think I was reading an article saying IE8 still has issues with this)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,820
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Setting sizes in pixels makes them invisibly small for anyone using a high resolution regardless of which browser is being used so even if IE does fix it so that text specified in pixels can be resized it will still be inappropriate to define text that way. Specifying font sizes less than 9pt is a bad idea since text that small is getting difficult for anyone to read and since depending on screen resolution and screen size 9pt can be anywhere between 9px and 90px specifying any font size in pixels less than 90px should be forbidden (of course then it ends up huge for anyone using lower screen resolutions so using any font sizes in pixels over 72px should be forbidden as well).
    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
  •