From what I understand the default font size in most browsers is 16px. That explains why a lot of people use font-size: 62.5%, which would set it to 10px and is easier to convert to EMs.
My issue is when I set the font-size for the body to 62.5% the text is super small but when I set it to 10px it is bigger. If I understand it correctly shouldn’t they be the same?
I am probably doing something wrong and would really like to figure it out.
Thanks
Apart from the very good points raised above the only other thing you may be doing wrong is nesting elements that have had a percentage value applied to them
e.g.
div{font-size:85%;}
<div><div>tiny text (85% of 85%)</div></div>
The size of the text on the inner div will be 85% of the size of its parent which is 85% of its parent. Percentages/ems will compound on nested elements when applied as above (think about nested lists etc.)
The way around it is to do something like this.
ul{font-size:80%}
ul ul{font-size:100%}
Basically using percentages/ems means that you create a relationship between the font sizes on your page. There can never be any real correlation between actual pixels sizes that others may be seeing on their monitors for the many reasons as already described above.
From what I understand the default font size in most browsers is 16px.
If you’re using IE on Windows XP with 96dpi set and no changes to anything… seriously even though most of my browsers are set somewhere around the equivalent of 16px, I’m running Gnome Desktop which makes everything in Firefox bigger compared to Win/96dpi meaning text will wrap over here where it doesn’t on the dev’s Winblows machine.
And then you have the font… did you set Verdana? Georgia? Larger x-height than say Arial or Times New Roman. And I get to set that in my browser, you only get to suggest it : )
In any case you obviously aren’t running the default something. Weird screen rez, weird font, weird dpi, weird browser. Like most of us : )
Why one is better off setting font-size on the body to 100%. The whole 62.5% idea needs everyone to have the same dpi and default font setting. Something as unreliable as the chances of my sock colours matching.
My issue is when I set the font-size for the body to 62.5% the text is super small but when I set it to 10px it is bigger.
Now you know how we all feel when trying to actually read something on all those sites who took that Truth as Gospel (too bad it was pushed by some big names in web developement… like Dan Cedarholm and others… people who we trust because they Know web design). This is why it’s not recommended to do 62.5%… you do want to use a % though, on the body, to get around an IE resize bug.
As Poes says, the default all depends on your system, setup and settings. That’s particularly true for % but also true for px as well.
Setting a base font size that is supposed to equal 10px really isn’t worth the effort. For a start, you often run into unintended inheritance effects, bugs and (ahem) features. For a second, you can’t control the OS and browser settings on every user’s computer, so you can’t guarantee they will get the exact same font rendering that you’re seeing on yours - so you have to make sure your design is flexible enough to cope with different font sizes. For a third, if you start with a base size of 10px then there’s a lot of temptation to think that that’s a suitable text size … it isn’t. You should not generally reduce the size of body text much (if any) below the default user setting. And for a last … what’s wrong with working out the font size relative to the default? You can still use %, which is relative to the parent, and calculations really aren’t that difficult to figure out, bearing in mind that you’re never going to get it pixel perfect!
Any attempt to equate pixels and em is misguided.
While there is a good reason to set a % for font size on the body tag to negate an IE bug 100% is just as good for the purpose as any. All other sizes can then be set in em and will then all maintain the same relative sizes as people adjust the font size in their browser.
Yeah for box sizing in em’s I used to just throw a background colour on the box and throw some random number on it and look at it : ) now I have general ideas for what sizes work for stuff and I can usually whip them out.
For fonts I can just leave a lot of stuff at 1em (the default if I set font-size to 100% anyway) so if anyone needs to be larger (headers), something over “1”, anything to be smaller, something less than “1”. I don’t set so many font sizes and then I don’t get the nesting problems you can get with %/em.