---
title: "Typographic styling with SCSS"
author: Garrett Winder
date: 2012-03-03
source: Erskine Design
weight: archive
url: https://garrettwinder.com/erskinedesign/typographic-styling-scss/
---

# Typographic styling with SCSS

> From the archive. Shows how Garrett got here; not his current views, services or prices. Written March 2012, Erskine Design. For what’s current, see https://garrettwinder.com/agents.md.

Friday, right after Erskine’s end-of-week pub rituals, [Phil](https://philswan.co) 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](http://www.sublimetext.com/2), [fetched](http://net.tutsplus.com/articles/news/introducing-nettuts-fetch/) the [Ultimate Package](https://github.com/simplygoodwork/gw.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](http://3.bp.blogspot.com/-lL_PKWn4miE/ThnwX0N3n7I/AAAAAAAAAIc/X5wfErzHp5Y/s1600/Nathans.jpg). We got keyboard shortcuts for toggling the baseline plugged in and cranked up [Lynyrd Skynyrd](http://en.wikipedia.org/wiki/Lynyrd_Skynyrd). It was time to make **[Instapaper](http://www.instapaper.com/) for cats**.

## Typography + SCSS = love

What I love about [SCSS](http://sass-lang.com/), 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](http://html5doctor.com/element-index/).

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_.