Rems in Chrome: A Small Problem

Rems (Relative ems) are an awesome way of sizing text without using pixels. But there is an issue with rendering them in Chrome, which makes text wonky as can be. Luckily, there is a small workaround.

If you are like us, you are using rems to define all your font size and falling back on pixels if they aren’t supported. You possibly even have a mixin like this:

@mixin rem($size, $attribute:font-size){
  #{$attribute}: ($size * 10) + px;
  #{$attribute}: $size + rem;
}

But the issue that we found is that if you use rems on your body tag, then your font will be all types of messed up in Chrome. To get around this, change your body to ems and rejoice at the rendering greatness.

Link to the issue and workaround on code.google.com