Using SASS mixins for Responsive Font Styles

By North Street, A Creative Studio

Previously, in a given design, if I saw a headline or sub-headline, I’d simply style the h1 or h2 tag.

However, for a recent project I instead created a mixin with those styles, then applied the mixin to that tag. So it looks like this in the sass file:

h2 {
@include subhead;
}

The advantage here, is that if later in the design I see another font style that is similar, but shouldn’t be an h2 tag, I just include it, like this:

div.person.title {
@include subhead;
}

The advantage of this strategy, is that when it comes to making this stuff responsive, you can adjust the font sizes in the mixin, once, and be done. Here’s the mixin for that particular style:

@mixin subhead {
    font-family: $sans;
    color: #000;
    font-size: $base-font-size*0.90;
    line-height: $base-line-height*.9;
    font-weight: 600;
    letter-spacing: 0.16em;

    @include media($smedium) {
        font-size: $base-font-size*1.05;
        line-height: $base-line-height;
    }    
}

 

About north street

We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.

More Notes

Team Spotlight: Matt Potter, Web Designer

Postcards from Puerto Rico: North Street Retreat ’22

We’re Hiring: Marketing Coordinator