Shuo Feng

Shuo Feng

Software Engineer

The Rem 62.5% bug

less than 1 minute read

More sites are using relative units like em and rem instead of pixels. The common approach is like this:

html { font-size: 62.5%; }
/*normally the default font size is 16px, 62.5% means 16px*62.5=10px*/
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

The reason why people would use 62.5% is that it is easier to calculate rem, but there is a bug in chrome, that is, even if you’ve set the html font size to 62.5%(10px), later rem will still calculate based on 12px.

To be honest, I kinda of agree with this article and this one, that setting the html to 62.5% font size is not the perfect solution, let alone rem is not functional in some browsers. To avoid the chrome bug, I set the font-size of html to 100%, but I still believe that there should be a better solution.

One possible solution is to use preprocessors to do all the math for you. But there is still problems with the line-height and margin, padding.

You may also enjoy