Keeping RWD Simple & Sassy – Responsive Typography

This is the third post in a series based on my recent RWD Summit talk “Keeping RWD Simple & Sassy.” It covers some useful techniques for managing responsive typography with Sass.

Responsive Sass Typography #

You might recall our $breakpoints map from the last post. Let’s combine that with 2 other maps to automate some responsive typography.

$breakpoints: (
  default: null,
  medium: 25em,
  large: 50em
);

$font-sizes: (
  default: 1rem,
  medium:  1.2rem,
  large:   1.4rem
);

$line-heights: (
  default: 1.5,
  medium:  1.6,
  large:   1.6
);

Again, we’ll use the function map-get() to retrieve values from these map.

$breakpoint-medium: map-get($breakpoints, medium);

$font-size-default: map-get($font-sizes, default);

$line-height-large: map-get($line-heights, large);

I mentioned earlier we’d be able to loop through a map (an advantage over a series of variables). Here’s a practical example. Let’s create some quick responsive typography with the three maps we just made a moment ago. For each breakpoint (default, medium, large), we’re going to set the base font-size & line-height on the body element.

body {
  @each $label, $min-width in $breakpoints {
    @include media-query($label) {
      font-size: map-get($font-sizes, $label);
      line-height: map-get($line-heights, $label);
    }
  }
}

And now we get responsive base typography:

body {
  font-size: 1rem;
  line-height: 1.5;
}
@media screen and (min-width: 25em) {
  body {
    font-size: 1.2rem;
    line-height: 1.6;
  }
}
@media screen and (min-width: 50em) {
  body {
    font-size: 1.4rem;
    line-height: 1.6;
  }
}

Responsive Typography Sass Libraries #