Typographic styling with SCSS

Posted by Garrett on

Friday, right after our 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 modular, reusable and maintainable. 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 modularize 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 practice 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 exercise 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.

More Articles

Donkeytail plugin for Craft CMS

Posted by Garrett

Today we released the lite version of Donkeytail, a Craft CMS plugin we’ve been using internally for a few months now. Donkeytail stems from a need we had to content manage dots on images. Maps come up a lot in our world. From maps for new development projects to maps for hiking trails through the Scottish Highlands, and most of the time it makes more sense to roll our own system for design… Read More »

Inaugural #CraftCMS meetup in Dallas

Posted by Garrett

Yesterday we hosted the inaugural #CraftCMS Dallas meetup by our friends at Busy Noggin — complete with lots of pizza, Twig and general website chatter. A good time was had and we’re looking forward to being a part of the growing Craft CMS community here in Dallas. If you missed it but are into Craft, don’t fret - there’ll be plenty more to come. If you’ve not used Craft but are… Read More »

Bob’s your uncle!

Posted by Garrett

A hearty welcome to the latest additions to our growing family, Steve Sharpe and Gavin Platt. Steve’s in Nottingham with Chris, and Gavin’s from wherever he’s calling home this week (though his mailing address is in Leeds). Steve’s our new in-house engineer — building anything from complex enterprise applications to native apps for iOS and Android. Gavin joins us after 10 years as a self… Read More »

Why our clients love Craft

More and more people are discovering Craft. With big names like the Associated Press, Netflix, and Agatha Christie moving to Craft, the future looks bright. There’s a lot out there on what makes Craft great from a technical standpoint, but Craft is great for non-technical users, too. Here are the biggest reasons our… Read More »

View All Articles

Envelope Icon

Join Our Newsletter

We don’t send them often, but you’ll want in on this action when we do.

Are you a design agency looking for a web development partner?

We can help