25

For a long time I've been using

body {font-size:62.5%;}

in CSS documents since it's supposed to make 1em equal 10px. However, I recently noticed that this isn't the case for me in Internet Explorer. So instead I tried the code:

html {font-size:100%}
body {font-size:10px}

Now this works like a charm for me. My question is:

What's the drawback of this solution since I can't find anyone else using it?

To clarify: I later specify all my font-sizes, widths, heights and so forth in em. It's just in the body I use 10px instead of 62.5%.

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
RichardL
  • 251
  • 1
  • 3
  • 5
  • Maybe this thread can give you more insight of the issue: [why-em-instead-of-px][1] [1]: http://stackoverflow.com/questions/609517/why-em-instead-of-px – Bas Slagter Oct 10 '11 at 14:50
  • 1
    I like pixel font sizes too... I feel like I have better design control. The drawback used to be that it did not scale well when people manually increased their text size... things would break/overflow. Using `%` or `em` would better compensate for these spacing issues. However, these days, newer browsers are moving more towards a true "zoom" in/out which makes the old increase/decrease text size issues moot. – Sparky Oct 10 '11 at 14:56
  • Well, I really want to go with em for accessability reasons. Thanks for the link, but I still don't understand the difference. In both cases 1em will be 10px in Firefox, but for me 1em will be slightly larger in Internet Explorer. – RichardL Oct 10 '11 at 14:59
  • @Sparky672: Very true about the zoom, but how does this affect user defined defaults? Like changing the font size in your browser settings? Aren't percentages or ems encouraged in that case (possibly among other cases)? – Wesley Murch Oct 10 '11 at 15:00
  • Before changing your whole style, you might want to check that the settings in IE haven't been changed inadvertently. Check Options, Accessibility, and check that the default Page Text size hasn't been changed. – Doozer Blake Oct 10 '11 at 15:08
  • @WesleyMurch, You have a very valid point. In my sites, all text containers are designed to simply expand with content. I guess it really comes down to your specific design and how you expect people to use it. I don't expect very many users to tinker with this, but I can't stop people from changing font size in their settings either. However, with browsers moving more towards how mobile browsers behave (smooth zooming), people will be less inclined to tinker with their default fonts. They can simply set a 125% view and everything, including the layout is scaled up smoothly. – Sparky Oct 10 '11 at 15:11
  • @DoozerBlake Thanks, everything seems to be at default settings. Can you identify any pitfalls by scaling em's from 10px instead of 62.5%? – RichardL Oct 10 '11 at 15:24
  • 3
    I get the impression people are missing the OP's point. I don't think he is asking whether he should use px or % for font sizes, he is asking if there is anything wrong with his new technique for setting the base size for all fonts. Does `body {font-size:62.5%;}` achieve the same as `html {font-size:100%} body {font-size:10px}` without any side effects? Correct me if I'm wrong @RichardL – punkrockbuddyholly Oct 10 '11 at 15:36
  • @MrMisterMan Yes, that's correct, thanks for making that clear. English is not my defualt language ;) – RichardL Oct 10 '11 at 15:46
  • The issue you are having with IE is a known bug and taken care of in most of the 'css resets' floating around by doing exactly what you do, setting the font-size to 100%. – Rob Oct 10 '11 at 16:24
  • @Rob: So, it isn't possible to override the IE `html` font-size to something like 10/12px? I'm asking this mainly because of the new `rem` unit of measure. – Alix Axel Jan 22 '12 at 15:23

3 Answers3

9

You're going to get arguments for both sides of this issue. I'm guessing a majority are going to argue for %. But you asked for drawbacks or pitfalls

The main drawback you would encounter would be if you ran across a browser or device that honored your pixel setting instead of a percentage of whatever it's default is, and that pixel setting happened to be problematic or too small to read. If that browser didn't offer the user an opportunity to either scale the font or zoom in on the page, then you could have a potential problem.

All that said, almost every browser these days has that default set at 16px. I can't speak to why IE in your case is sizing it differently. If you are going for a pixel perfectly sized design, then use px, otherwise I'd suggest staying with the %.

Doozer Blake
  • 7,677
  • 2
  • 29
  • 40
  • Thanks for this answer. It was what I was looking for, even though it still presents a problem for me. Perhaps I'll test the site on another CPU with IE to see if I still have the same problem. If it has, then something else in my code must be causing this. – RichardL Oct 10 '11 at 15:49
  • if it's the answer you were looking for mark it as a correct anwswer so he gets his points =) – Facundo Colombier Aug 14 '13 at 13:09
0

You could just use:

html {font-size:10px}

So know you can work just with rem or em without complex calculations: 1 rem = 10px 2 rem = 20px

user2670996
  • 2,654
  • 6
  • 29
  • 45
  • 4
    This overrides the user's accessibility options (setting their own base font-size). It's better to assume a browser default of 16px, let the user modify this as they like, and define `html {font-size: 62.5%}` = 10px / 16px, to get the same "simple calculations" while respecting accessibility options. – eedrah Jun 13 '18 at 14:50
0

The percent unit depends on the set of the browser. In case of web accessibility, the default setting of most browsers make 16px equals to 100%, so 10px equals to 62.5%. However, if you set the browser's default font size setting to smaller or bigger, the 62.5% does't equals to 10px yet.

Goran Jakovljevic
  • 2,714
  • 1
  • 31
  • 27