Product designer

Front-end developer

Full-stack UX design specialist

For business enquiries or casual chatter—do drop me a line at lp.frtoip@olleh. I ♥︎ emails.


ArticleResponsive typography with SASS


So I’d like to share with you another mixin I’ve grown to use loads in the past days on various projects of differing volume. A mixin that might save you some trouble when setting font sizes for user interfaces you’re building and keep the things consistent throughout.

This pretty much solves two issues I’ve had to deal with so far:

  • delivering different font size values depending on device’s screen size
  • pairing font sizes with line heights to make sure both are using consistently throughout the entire app

What I want to do in the end is to set one value that pretty much does it all for me instead of worrying to specify differing values per @media query:

@include set-type-small();

…which, depending on my config file variables, will do something like:

.selector {
  font-size: 12px;
  line-height: 1.5em;
  @media only screen and (min-width: 40.063em) {
    font-size: 13px;
    line-height: 1.5em;
  }
  @media only screen and (min-width: 64.063em) {
    font-size: 15px;
    line-height: 1.6em
  }
}

Without a further ado, here’s the code which you can also find on Github. Note that you will need to declare font-size, line-height and media-query according to your needs and typefaces used.

/**
 * Set Type
 * ============================================ */

@mixin set-type-huge {
  font-size  : $font-xxl * 1.25;
  line-height: $line-s;
  @include breakpoint(m) {
    font-size  : $font-xxl * 2;
    line-height: $line-s;
  }
}
@mixin set-type-xlarge {
  font-size  : $font-xl;
  line-height: $line-m;
  @include breakpoint(m) {
    font-size  : $font-xxl;
    line-height: $line-m;
  }
}
@mixin set-type-large {
  font-size  : $font-l;
  line-height: $line-m;
  @include breakpoint(m) {
    font-size  : $font-xl;
    line-height: $line-m;
  }
}
@mixin set-type-medium {
  font-size  : $font-m;
  line-height: $line-s;
  @include breakpoint(m) {
    font-size  : $font-l;
    line-height: $line-m;
  }
}
@mixin set-type-small {
  font-size  : $font-s;
  line-height: $line-m;
  @include breakpoint(m) {
    font-size  : $font-m;
    line-height: $line-m;
  }
}
@mixin set-type-xsmall {
  font-size  : $font-xs;
  line-height: $line-s;
  @include breakpoint(m) {
    font-size  : $font-s;
    line-height: $line-s;
  }
}
@mixin set-type-tiny {
  font-size  : $font-xxs;
  line-height: $line-s;
  @include breakpoint(m) {
    font-size  : $font-xs;
    line-height: $line-s;
  }
}