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

 

Let’s Create Something Great Together!

Our team is highly motivated and inventive thinkers and tinkerers — designers, developers, engineers & more.

Plan a Project

Hire Us

Join the Team

Work With Us

đŸ–„