Typographic styling with SCSS

Filed under #erskinedesign on March 03, 2012  

Originally published at web.archive.org on March 03, 2012

Friday, right after Erskine’s end-of-week pub rituals, Phil and I went back to the office with hopes of building a website. At the beginning of last week we got fairly obsessed with typographic styling, so this would be a good time to experiment with that process a bit more.

We fired up Sublime, fetched the Ultimate Package and jumped in. We started with a simple page including kitchen sink-ish html for headings, paragraphs, links and all the other elements that get me going.

We chose a base font-size, Phil created a baseline.png file and I ate two American style hotdogs. We got keyboard shortcuts for toggling the baseline plugged in and cranked up Lynyrd Skynyrd. It was time to make Instapaper for cats.

Typography + SCSS = love

What I love about SCSS, besides variables, is its most dangerous feature: nesting. When used smartly, nesting can make your stylesheets much more modulular, reusable and maintanable. Lets take a look at the standard workflow of styling typography and how it can be applied with SCSS.

Standard workflow

  1. Setup default font-size, line-height and margin to be inherited by generic elements and ensure they’re inline with the baseline.
  2. Put an h1 at the top of the page, give it some line-height and margin so everything is still inline with the baseline.
  3. Do the same with h2 through h6, but also ensure p + h(n) has proper margin and doesn’t break the baseline.
  4. Ensure h2 + h3, etc., has proper margin and doesn’t break the baseline.
  5. Lastly, do the same for blockquote, table and ALL THE OTHER THINGS.

That list isn’t too daunting, but it takes about 2 hours of pair brogramming to get right, 4-6 if you’re me and Phil. With SCSS, we can modularise this process by creating a little typographic skeleton. This doesn’t exactly speed up the process, but it’s a good example of how we can use SCSS to clean up our development.

Typographic skeleton with SCSS

First, we setup the defaults to be inherited by all of our generic elements. I know this is standard practise but for the sake of the case study I’ll include it:

body {
font:$normal percentage($basefont / 16) sans-serif;
line-height:(24 / $basefont);
}

Now that that’s done, we need to ensure p + h(n) has proper styling and doesn’t break the baseline. Not only p, but the other generic elements as well. This can be done beautifully with SCSS.

p, ul, dl, ol, address, figure, hr, pre, table {
margin-bottom:;

& + h2 {
padding-top:;
}
& + h3 {
padding-top:;
}
& + h4 {
padding-top:;
}
& + h5 {
padding-top:;
}
& + h6 {
padding-top:;
}
}

We need to ensure that h1 + h2, etc. have proper styling too.

h1 {
font-size:($baseh1 / $basefont) * 1em;
line-height:;
margin:;

& + h2 {
padding-top:;
}
}

h2 {
font-size:($baseh2 / $basefont) * 1em;
line-height:;
margin:;

& + h3 {
padding-top:;
}
}

You get the point, same for h3 through h6. Tada!

Summary

This exersise helped me learn a lot about the importance of extreme readability. It’s something I don’t think I’ve paid enough attention to in the past so effective immediately I’m adding it to my list of Things to take over-the-top on every single project.