How to create typography tokens for a design system using Sass mixins

A lot of design systems start out with basic design tokens for things like colors and sizes, which can be easily translated into CSS variables (or Sass, or Less, etc.).

// tokens.scss

$primary-text-color: #aaa;

$secondary-text-color: #ccc;



$size-s: 8px;

$size-m: 16px;



// some-component.scss

.some-component {

    color: $primary-text-color;

    padding: $size-s $size-m;



    h4 {

        color: $secondary-text-color;

    }

}

The next logical addition to your collection of tokens is fonts. And while you can apply the above pattern to fonts, most designers I’ve ever encountered think about typography as a whole. The font and its weight influence its size and line-height — it’s all a package deal.

In other words, typography is treated as a class. This is a great use case for a Sass (or Less) mixin (unfortunately, there’s currently no equivalent in native CSS).

Here’s an example:

// tokens.scss

$font-sans-serif: Aria, Helvetica, sans-serif;



$size-s: 8px;

$size-m: 16px;

$size-l: 24px;

$size-xl: 48px;



@mixin heading-sans-serif-l {

    font-family: $font-sans-serif;

    font-size: $size-l;

    font-weight: 700;

    line-height: 1.3;

}



@mixin heading-sans-serif-xl {

    font-family: $font-sans-serif;

    font-size: $size-xl;

    font-weight: 700;

    line-height: 1.4;

}



// some-component.scss

@use "tokens";



.some-component {



    h2 {

        @include tokens.heading-sans-serif-xl;



        padding: $size-l $size-xl;  

    }



    h3 {

        @include tokens.heading-sans-serif-l;



        padding: $size-s $size-m;   

    }   

}

Every h2 and h3 within any component with the some-component class will get all of the styles defined within its included mixin — font-family, font-size, font-weight, line-height — and we’re free to extend it by adding in some padding (you import from an outside file by using @use). You could also overwrite any of the mixin values, if necessary (or if you want to make a designer’s eyes twitch).

This is the approach I took when building out a design system at Dictionary.com. It definitely helped streamline the redesign effort of our home (Thesaurus.com, too!) and browse pages (/browse/light is the quintessential example), which launched earlier this year.

Leverage mixins to create powerful building blocks within your design system.