Forums

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
    Posts
  • December 4, 2008 at 2:16 pm #23698
    Toby Pitman
    Participant

    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 #51824
    tcindie
    Member

    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 #51836
    Toby Pitman
    Participant

    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 #51838
    iopet
    Member

    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 #147766
    RjBradlow
    Participant
    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

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.