REMify Your Typography

I've been making excuses for years to use px on my font-sizes. Deep inside i know it's wrong. And in this post i will show how i made the move and how i made it so simple i feel lazy everytime i use it. I'm using SASS, i'm sure it's easy to do a similar system in LESS.

Ires method

It all started with this article. If you, like me, suppress the proper way to use font-size and need a little brushing up on that front. I recommend reading the whole thing. Otherwise, scroll to the "My Method" part.

Basically she sets the base font (the html element) to 62.5% which is 10px in most cases. This makes it easier to calculate the pixel. Look at the below stolen snippet:

html {
  font-size: 62.5%; /* sets the base font to 10px for easier math */
}

body {
  font-size: 16px;
  font-size: 1.6rem;  
  /* sets the default sizing to make sure nothing is actually 10px */
}

h1 {
  font-size: 32px;
  font-size: 3.2rem;
}

Easy! Readable! This is awesome.

Wills method

In a comment by Will Russel he shows the following SASS function:

@function rem($size) {
  $remSize: $size / 16;
  @return $remSize * 1rem;
}

Now you can write it like:

.link {
  font-size: 20px;
  font-size: rem(20);
}

Very cool! Now you don't need to set a base size. But i dumbed it down even more so that even i can't make up excuses not to use this technique.

My method

I added this mixin:

@mixin remify($property, $sizes) {

    $pixelSizes: ();
    $remSizes: ();
    @each $s in $sizes {
        $pixelSizes: append($pixelSizes, $s * 1px);
        $remSizes: append($remSizes, rem($s));
    }

    #{$property}: $pixelSizes;
    #{$property}: $remSizes;
}

This way you can do both:

@include remify(font-size, 25);
// Outputs
// font-size: 25px;
// font-size: 1.5625rem;

And:

@include remify(margin, 15 0);
// Outputs
// margin: 15px 0px;
// margin: 0.9375rem 0rem;

I didn't bake in the rem() function because in some cases it's nice to have that one to. For example, there is no support for auto so sometimes i declare some semi manual rules.

margin: 10px auto;
margin: rem(10) auto;

See the Gist.