26

I know we all probably used before 62.5% as font body size, we used this for old IE versions to do correct scaling on zoom.

So, I understand why it is this value, and how it deals with "em". What I don't understand is why peoples still use it? Especially when they have design which anyway not respect user font settings.

I'm not have anything against it when it used a clever way, like those one site good example http://www.polarfoundation.org/ it fully respect user font settings and adjust the display to it, so here it is absolutely needed and all fine.

And here is an opposite example http://froont.com/ it has nothing with respect to the user's font settings. So if the user, for example, has an extra large font in browser defaults their design simply become broken. So if they anyway make design based on magic value of "62.5%" which is "10px" and count all other values from that point why not simply put "10px" instead of "62.5" this way design not become broken and nowadays all browsers can handle zoom of "px" without any problem.

So questions are:

  • Am I missing something?
  • Is there a real reason still using "62.5%" instead of "10px"?
  • Is there some benefits to use "62.5%" instead of even if the design gets broken(according to example)?

Because as for the example above I feel dumb in understanding why they do that if it doesn't work correctly.

UPDATE 1:
It's not related to font-size:62.5% vs. font-size:10px. I know so 62.5% is equal to 10px in many points and I know what the difference is. I'm not talking about IE behavior for which is related. Besides, I'm interested why it's used when no need.

Please read question before comment.

  1. It not related to scaling, look on 2nd example, it used as a magic point to 10px, and it especially broke everything on scaling
  2. It not related to golden rule, 62.5% used to get base font of 10px for easy math

UPDATE 2:
Here are images of both examples on different default browser font size. I hope they explain more what I mean.

Good example, normal default font size(16px): example 1 normal scale

Good example, large default font size: example 1 large scale

In this one example everything is fine, they don't use magic value but fully respect default browser font, so everything's alright even when font changes.

Bad example, normal default font size(16px): example 2 normal scale

Bad example, large default font size: example 2 large scale

And this is where everything goes wrong, cos they used "62.5%" in assuming it to become "10px". But if they only used it as is "10px" all still be fine, so why they and many others still use "62.5%" even without thinking?

Emre Erkan
  • 8,433
  • 3
  • 48
  • 53
zr9
  • 516
  • 1
  • 4
  • 13
  • 3
    Short answer: percentages are relative and scale better. This is especially true with responsive design. – ElGavilan Mar 11 '15 at 13:55
  • I think it is related to the golden ratio http://en.wikipedia.org/wiki/Golden_ratio. Then there will be a "harmony" in the size difference even if you change the base font size. – Albin Mar 11 '15 at 13:56
  • 1
    possible duplicate of [font-size:62.5% vs. font-size:10px](http://stackoverflow.com/questions/7714543/font-size62-5-vs-font-size10px) – Paulie_D Mar 11 '15 at 13:59
  • consider a nexus 10 tablet: 2560x1600 pixels on a 10" screen, which is a ~300ppi size. setting text to a 10px font size means your characters will be around 0.03333" tall - basically unreadable. – Marc B Mar 11 '15 at 13:59
  • @MarcB yup i'm know, 10px used for math before, and sometimes even now. But question exactly related to why use "62.5%" instead of "10px" even when your design not flexible and get broken if user default font is not 16px. – zr9 Mar 11 '15 at 14:17
  • it has to do with rem and possible px fallback, setting it 62.5% will make them fo on together -> 10px = 1rem – maioman Mar 11 '15 at 14:26
  • @maioman I'm know, thing so 62.5% equals to 10px only in case when default font size is 16px. And it breaks when default browser font size more then 16px. So what i'm trying to understand why is they assume so all have 16px font size and non simply use 10px to achieve same result. – zr9 Mar 11 '15 at 14:28
  • @MarcB Never tried that out, as i don have nexus, only a desktop. but one thing can be said with utmost certainty - if you do `font-size: 62.5%;` It **is not** 62.5% of screen, but 62.5% of base `font-size`, or body default for most browsers (16px) equaling to 10px. So whatever 10px will be rendered as, if the default font size is 16px, `font-size :62.5%;` will be rendered exactly **the same**, having thereby no difference in the output. – Max Payne Apr 02 '15 at 05:07

3 Answers3

55

The short answer:

62.5% is equal to 10px in most browsers, so it makes it easier to calculate REM units.

The main reason I don't declare html { font-size: 10px; } is that if a visually impaired user has reset their base browser size (up or down), I want to respect that, so I want my site's typography to scale proportionally to his default browser settings.

The long answer:

10px is a ridiculously small font size. However, it has some utility if you apply it judiciously.

By resetting the root (HTML) font to 62.5%, I can calculate all of my REM units with that magical 1rem = 10px formula

Then, I reset body back to my default font size using EMs (body { font-size: 1.6em }, proportinal to the 62.5% number, it's now easy to see that's 16 px)

From there, all the units can be declared as em or REM units, proportional to the root font size.

Nhan
  • 3,595
  • 6
  • 30
  • 38
kgcreative
  • 671
  • 1
  • 5
  • 3
  • 3
    Your last paragraph should be included in the short answer, as that was the main thing he was asking. Why do developers use 62.5% and not 10px. Do that and your answer should be the selected answer. – John Harding Dec 05 '18 at 20:13
  • "if a visually impaired user has reset their base browser size (up or down), I want to respect that, so I want my site's typography to scale proportionally to his default browser settings." -- Is there any evidence whatsoever that a visually-impaired user would not be able to scale a site's typography if the font size is 10px? Where does this idea come from? All modern browsers can zoom regardless. – Matthew Dean Jan 27 '22 at 22:11
  • Oh! It looks like yes, ZOOMING is supported, but a user changing their default font size will ONLY be supported if you set your root font size as a %. So the short answer is that 62.5% and 10px are the same behavior depending on user defaults. – Matthew Dean Mar 15 '22 at 18:59
23

Developers use it to make it simple for them to design. The default font size is 16px, so they set the body font size to 62.5%. Therefore:

Body font-size = (62.5/100)*16 = 10px

Now as human beings, we find it very easy to use the decimal system. It's also easy to understand fractions in terms of 10, so responsive designing becomes easier!

By the way, i recommend you use font-size: 10px; explicitly in the body, as all browser default font-size might not be 16px.

Hope I am helpful :)

aar0n
  • 1,546
  • 1
  • 10
  • 10
Max Payne
  • 2,423
  • 17
  • 32
  • I'm know so it used for easy math. And yup it exactly is question :) Why so many developers use 62.5% instead of 10px. Look please updated question hope it helps to explain what i'm mean. – zr9 Mar 11 '15 at 14:41
  • If default is 16px , then 62.5% makes it 10px. So this let them use font size relative to body! now if they use height 1em, it will be 10px, as it is the body font size now and i em is parents fontsize! it makes no difference to use 62.5% or 10px on body font size, as they both do same things. – Max Payne Mar 11 '15 at 14:49
  • 2
    Yup, almost no difference. In case of 10px if user browser font size large nothing get broken, but in case of 62.5% everything get broken. So difference only in that small detail, and thats leads to itself question, why developers still use weird 62.5% without thinking. So those question more like curiosity and trying to understand why they do that when it possible to avoid. – zr9 Mar 11 '15 at 14:54
  • i don know about other developors, but i never do anything delibretly to lose browser support. you want to set the default to 10px? set it 10px to body :) Btw. real developers use `em` ! http://www.w3.org/WAI/GL/css2em.htm – Max Payne Mar 11 '15 at 14:56
  • Yup i'm as well use `em` or `rem`, but in case if your design not fully flexible we anyway need to specify base font size to get some start point to `em`. Basically one of those designs lead me to this question :) – zr9 Mar 11 '15 at 14:59
2

After a few days of digging, asking friends and looking i'm get to next conclusions on this:

1) Some developers use this solution without knowing how this works
2) Some of them use this as part of some other framework, and still they non know how it works, neither probably looked on guidelines
3) Some of them planned to go with flexible design but forgot about that and left this thing as is

So it like this.

zr9
  • 516
  • 1
  • 4
  • 13