Sizing type on the web in 2013

It seems really kinda mysterious thing, to use ems or px, or maybe rems? But in reality it's really quit simple.

The thing is…

Use rem’s


What is a rem?

I quote:

The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

It’s taken from this article, I recommend reading it.

But why rems over pxls?

  • Internet Explorers can’t really resize pixel set type.
  • It doesn’t cascade (we’ll come to this later)

But why rems over ems?

All the IEs play nicely with ems and they cascade like motherfuckers, but…

I quote:

The problem with em-based font sizing is that the font size compounds. A list within a list isn’t 14px, it’s 20px. Go another level deeper and it’s 27px!

You can easily get over it but it’s still a drag.

Why is the cascading so important?

Sometimes you want the type bigger or smaller depending on the screen size. With rems you can just change the value in the root element and all text down the line will resize. Simple and effective.

@media screen and (max-width: 639px) {
    /* Make the type a bit smaller on a small screens */
    body {
        font-size: 0.7rem;

Setting it all up

The article that I quoted is really nice and mandatory read! But, it uses the font-size: 62.5%; baseline thing, that is a bit old and useless, kinda, sorta (the article was written in 2011).

html {
    font-size: 62.5%;

We use it solely cause then the rem and em values to look nice, so that the code is easy to maintain (aspect not to be belittled). For instance 1.4rem equals to 14px, where as normally it would be something totally wild like 0.875rem. If we’d want to change the font size for a given site that uses the wild rem or em values, we’d need to whip out a conversion tool.

Speaking of tools, we got SASS now that can do the calculation for us! Have the cake and eat it too.

Here’s a sass mixin to do that:

// Function for converting a px based font-size to rem
@function calculateRem($size) {
    $remSize: $size / 16px;
    // Default font size on html element is 100%, equivalent to 16px
    @return #{$remSize}rem;

// Mixin that will include the fall back px declaration as well as the calculated rem value
@mixin fontSize($size) {
    font-size: $size;
    font-size: calculateRem($size);


And you use it like this:

@include fontSize(14px);

You may also wanna take a look of the rem browser compatibility table.

Further reading and sources

Club-Mate, the beverage →