Forums

toby

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

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

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?

tcindie

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

toby

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

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

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.

iopet

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

treehouse : what would you like to learn today?

Forums

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