The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #23698
    Toby Pitman

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


    ….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….

    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?


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

    Toby Pitman

    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


    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…

    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.


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

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

    or just…

    body { font-size: 10px;}

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

        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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.