CSS fonts rem trick: 62.5% or 6.25%

Question

I would like to use font sizing with REM and on internet I found following trick:

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   {          


        

Answer 1

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.

There has been nothing wrong with the traditional 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.