How to structure your typography in Sass

I've always been focused on strong typography when it comes to design. As I've evolved into a front end developer, I still focus a lot on the typography of a project. As I've written about before, if the design is up to me, I even start with setting the paragraph.

However, what can you do to set yourself up for success when it comes to coding a design and it's typography? I've done this - a lot - and I've come to some conclusions.

Some of my guiding principles are:

So what does this look like in an actual project?

  1. Determine the paragraph style. I typically start development at the same place I start a design: the treatment of the paragraph. If I've been supplied with a visual design, I look for what treatment could be considered the most common, "body copy" style.
  2. Set up your font stacks. Most designs I deal with make use of 1 to 3 typefaces. (Any more than this and there needs to be an intervention) Those typically are a serif, a sans-serif, and possibly some kind of accent typeface. Knowing this, I'll set up my font stacks as Sass variables very early on in the project:
$sans-serif: "Source Sans Pro", Helvetica, Verdana, sans-serif;
$serif: Merriweather, Georgia, "Times New Roman", serif;
$mono: "Source Code Pro", Courier, mono;

The above example is from this very website's variables partial. (In my case my third typeface is used for code examples).

  1. Set your font weights as variables. This is really useful if the design switches from using a 700 weight to a 900 weight for bold, for instance.
$light: 300;
$normal: 400;
$semibold: 500;
$bold: 700;
  1. Style the body element. This is where I typically see other developers missing an opportunity to make their lives easier, so this is really the point of the post. If you apply the paragraph typographic style to your body element, you will save yourself a lot of rework. If you've identified the most common typographic treatment (see Step 1), you can style your <body> element with that treatment. This has three advantages -

    1. You save yourself a lot of redeclaration of font-famlies, colors and so on.
    2. And in so doing you'll acheive greater consistency, as there are fewer declarations to get wrong or maintain later.
    3. There will be a baseline deliberate styling of text, in the event you don't think to style some element down the line.

    Here is what this website's body element looks like:

body {
  font-family: $sans-serif;
  font-weight: $light;
  color: $txt-primary; //color variable set elsewhere
  background: $body-bg;
  -webkit-text-size-adjust: 100%; //fix for iOS
}

This is usually constrained just to the font-family, font-weight, color, and sometimes line-height declarations. You're not going to want to apply box-model properties to the <body> element.

With this styling in place, you can start changing the style of elements by making use of the font-weight and font-style property, which goes back to the "least amount possible" principle. By relying on those styling switches, governing the overall typeface becomes much easier.

Now, when you want to call in your secondary or accent typeface, you deliberately declare it where needed, and that's it.

h1 {
  font-family: $serif;
}

And since you already have your font stacks declared as variables, you can govern that type choice much more easily.

I hope these guidelines and basic steps help you in your next project. If you have any other ways to make your life easier, please share them in the comments!