Grow your CSS skills. Land your dream job.

The problem with body{font-size:62.5%;} and em’s!

  • # December 4, 2008 at 2:16 pm

    I’ve come across a wee problem with the following CSS….

    Code:
    body{font-size:62.5%;}

    ….namely if the user has their default browser font size set to anything other than the one your testing with it can totally &^%$ up the look of your site layout.

    I came across this as I was testing something on Safari (which I never normally use on my laptop). My whole layout text was really small just in Safari. After some rumaging around I noticed the default text size in ‘preferences’ was set to 12px ( probably why I never use it! ).

    After declaring this….

    Code:
    html {font-size:16px;}

    …before the <body> tag CSS it all looked as it should in all browsers.

    Has anyone ever considered the default size of their users browsers ( especially if thier ‘optically’ in their twilight years? ) when using em’s for text size based on the 62.5% rule?

    Any thoughts?

    # December 4, 2008 at 3:23 pm

    Well, 62.5% of 16px is 10px, so you could just use font-size:10px; instead of the 62.5%…

    # December 4, 2008 at 4:42 pm

    That’s not quite what I mean’t.

    I did’nt want 10px I wanted 16px!

    If my browsers default font size is set to 16px and I use the the 62.5% rule so 1em = 10px and I set my body <p> tag to

    Code:
    font-size:1.6em;

    I would hope the <p> would come out at 16px.

    If my browsers default font-size is 12px then 1em = 7.5px. at 1.6em it comes out at 12px.

    At 20px 1em would = 12.5px

    All I’m saying is, isn’t is good practice when using em’s to give a master font size to over ride any browser defaults?

    Say putting…

    Code:
    html {font-size: 16px;}

    before you shrink it with 62.5% to set up proper em measurements.

    This isn’t just for font size. It effects margins and padding too that are set with em’s.

    # December 4, 2008 at 4:57 pm

    tcindie is right on the money. The em’s will all still apply the same, whether you’ve

    Code:
    html { font-size: 16px;}
    body { font-size: 62.5%;}

    or just…

    Code:
    body { font-size: 10px;}

    The ‘body’ is more specific and will take precedence over ‘html’.

    # August 21, 2013 at 7:01 pm
    body{
        font-size: 12pt;
        font-size: 16px;
        font-size: 1.000rem;
      }
    

    Don’t step in the em&ems :)

    percentages & ems inherit and cascade ! 3. Em’s cascade like a mo-fo

    http://www.w3.org/TR/CSS2/cascade.html

    # August 22, 2013 at 2:15 am

    The problem your encountering is the exact reason you should use ems/rems rather than a pixel size.

    So that if the browser explicitly sets a default size it gets respected (to some degree)

    If you wanted 100% definitive control over font-sizes you should use px. If you want it to look how you want for everyone who hasn’t purposefully changed their default font-size you should use em’s or rems with a px fallback

    There are many mixins out there but I use this for rems with px fallback

    http://codepen.io/basement31/pen/qroHI

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".