CSS 62.5% why do developers use it? [closed]

Question

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):

Good example, large default font size:

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):

Bad example, large default font size:

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?

Answer 1

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.