CSS 62.5% why do developers use it?

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.

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

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.