Font-Size:62.5% VS. Font-Size:10Px

CSS 62.5% why do developers use it?

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

What does font-size 62.5% do?

font-size: 62.5%; on html tag is a method helping you to convert easily px to rem.

As 62.5% of the default font size in browser (16px) is equal to 10px, convert pixel values to rem values become easy. For example, 1.6rem will have a 16px rendering (16/10=1.6).

You can get more informations about CSS font size units on this link : https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

Should I keep the 62.5% font-size with Modular Scale?

It depends on your browser requirements. If you need to support IE8, your REMs would need to be backed up with pixels anyway. The reason for the 62.5% is so the maths is easier for EM based sites so 1EM = 10px. Other than that it doesn't do anything so you can drop it if you're using REMs, don't mind the maths (if you're converting to pixels in your head) and you're not supporting IE8 and under.

CSS fonts rem trick: 62.5% or 6.25%

62.5% of 16px is 10px, a much more reasonable base font size that can serve as a fallback for older browsers that don't support the rem unit such as IE8, Firefox 3.5, Safari 4 and Opera 11. If you set font-size: 6.25%, older browsers that don't understand rems will ignore all your rem declarations and see your entire site in the same very small print, making it unreadable. Keep in mind that 6.25% of 16px (user-defined font sizes notwithstanding) is one pixel. Google Chrome even enforces a minimum font size of 6px (by default anyway; it's possible to override this with a configuration change, but it's not recommended), which will actually interfere with all your rem calculations even though it understands rems just fine.

There has been nothing wrong with the traditional 62.5% approach and there are no benefits to deviating from it the way you have — only pitfalls. Yes, you can say that you're not supporting older browsers, and that's fine, but that doesn't change the fact that someone who happens across your site in an older browser is going to get an unreadable experience that wouldn't happen with the traditional approach just because you, the author, wanted 1:1 px-to-rem mappings in your stylesheet.

Purpose of 62.5% font-size in elastic layouts

If you were setting all your padding/margins with rem - That way you know 1rem = 10px when at a 100% browser zoom.

What is the correct font-size to get desired results?

That is very much depending on your personal programming style and preference.

I for myself prefer to set the font-sizes in em. That gives me the advantage that I can adjust all font-sizes in the page, by changing one number in the body.

If you use a font size of 100% or 62.5% is also personal preference and depending on the layout. No one can tell you an optimal value, because no one knows what you personally like and want.