Baseline rem

Jul 14 2013

SCSS

Whilst developing this blog, I’ve been playing with a new technique for sizing text and creating a layout based on proportions from the type – effectively using a baseline grid. I’m still undecided whether it is a bad idea or pure genius. Either way, it’s been a good experience trying it out and I furthered my knowledge of the power of Sass.

I’ve been interested in the ‘rem’ unit for sizing text on the web for a while but haven’t had a chance to try it out until now (where if it didn’t work out it wasn’t the end of the world). The process of setting text to a baseline grid on the web – especially one that works across responsive design – has always been a tricky one. Sassparilla uses one of the best methods I’ve seen to do it so far, but I thought I would give it a go using rems.

The first thing I do when working with a design for print is to choose the type and from there work out a baseline grid that is suitable to use throughout the entire document. This depends on a few different aspects but predominantly I use half the line-height (leading) of the body text. I then use this size proportionally throughout the document for margins, column gutters, paragraph spacing etc. The reason behind using half this measurement is to allow smaller text, footnotes etc, to have smaller line-height still on the grid and to allow finer tweaking of the spacing. Proportions have been used for centuries in print design so why should we stop doing so for the web? Yes it is a completely different medium – haters gonna hate etc – however this is something that can be used to to create harmonious designs on screen and some kick-ass typography.

So once I had chosen the typeface and settled upon the font-size & line-height for the body text, I decided to try out this way of working on the web. The problem I found is that you end up working with some very nasty numbers for the majority of the measurements to get all the text on the baseline grid and all the spacing proportional to it. My idea was instead of setting the root font-size to the size I chose for the text, to set it to half the line-height measurement instead. This now becomes the height that will be used for the baseline grid and is where using rems really come into its own.

html {
    font-size: 75%; /* 12px - half 24px body text line-height */
}

p {
    line-height: 2rem;
    margin-bottom: 2rem;
    @include fontsize-0(16);
}

Example SCSS

Using integer increments of rems, you can now get a proportional measure of the baseline grid. Great, wasn’t that simple? Not quite finished unfortunately. You’ll notice the @include being used to get the font-size. The problem with this technique is to get the right font-size for the relative baseline results in some interesting values, sometimes with many decimal places. These are a pain to work out each time and work with, however is the lesser of two evils as it is only one value rather than possibly many for each element (line-height, padding, margins etc).

With the help of Sass you can actually very easily get round this:

$rootsize-0: 12; /* variable to set root font-size to 12px */

@mixin rootsize-0 {
    font-size: #{$rootsize-0/16*100%}; /* make percentage */
}

@mixin fontsize-0($value){
    font-size: #{$value/$rootsize-0}rem; /* font-size to rem */
}

html {
    @include rootsize-0; /* set root font-size */
}

p {
    @include fontsize-0(16); /* font-size to 16px in rems */
}

Example SCSS mixins

Getting some Sass mixins to do the maths and output the exact values each time is a lifesaver for this method. Simply enter the pixel value desired into the font sizing mixin and it will convert it to rems based on the current root font-size. This example is based on a mobile-first responsive build and is for the initial sizing – hence the 0 on the end of each mixin. This can be repeated for each breakpoint creating mixins for each resulting in something along the lines of this:

html {
    @include rootsize-0;
    @include breakpoint(break-1) {
        @include rootsize-1;
    }
    @include breakpoint(break-2) {
        @include rootsize-2;
    }
    @include breakpoint(break-3) {
        @include rootsize-3;
    }
}

p {
    line-height: 2rem;
    margin-bottom: 2rem;
    @include fontsize-0(16);
    @include breakpoint(break-1) {
        @include fontsize-1(18);
    }
    @include breakpoint(break-2) {
        @include fontsize-2(20);
    }
    @include breakpoint(break-3) {
        @include fontsize-3(22);
    }
}

Also using this breakpoint SCSS mixin

A bonus of working with proportions for typography in responsive design is that you only have to set the spacing once – for the initial size. Then as the breakpoints kick in increasing the root font-size and paragraph font-size, the text is still in harmony. Obviously the font-size and line-height needs to be worked out for each breakpoint first. The only thing you need to keep an eye on is the max-width of the container so the line length is always suitable. Some minor tweaks may be needed too.

I will note that you should use pixel fallbacks when using rems for full browser support. These could easily be added into the mixins if desired.

I would love to get any opinions on this method. Feel free to grab me on twitter.

Older post Newer post