Give help. Get help.

  • # December 4, 2008 at 2:16 pm

    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?

    # 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


    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.

    # 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

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

    # August 21, 2013 at 7:01 pm
        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.