sass.type

A glob of functions and mixins for typographic rhythm.

Usage

Store your type settings inside a variable and create a fall-back $font-default

$font-helvetica: (
  font-family: 'Helvetica, sans-serif',

  base: (
    font-size: 18,
    line-height: 22
  ),

  large: (
    font-size: 36,
    line-height: 42
  ),
);

$font-default: $font-helvetica;

Then, with all that data stored we can finally use the mixins:

h1 {
  font-family: font-family($font-helvetica);
  @include font-scale(large);
}

The output will look like this in CSS:

h1 {
  font-family: Open Sans, sans-serif;
  font-size: 36px;
  line-height: 42px;
}

Acknowledgements

• Setting typographic scale with Sass maps