From the Articles

Responsive typography with Sass

21st October 2014


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 consistend throughout. It 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 heighs 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 deffering 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;
  }
}

Like what you read? Subscribe via Email or RSS.
Have a comment? Text me on Twitter.