Typographic Scale Mixin

typographic-scale.sass

=set-type($base: 16px, $leading: 24px, $scale: 16px 18px 21px 24px 36px 48px)

  body
    font-size:  percentage($base/16px)

  h1
    font-size: #{ nth($scale, 6) / $base }em
    // TODO: figure out how to choose how many
    // baseline grid spaces to use for line height
    line-height: #{ ($leading * 2) / nth($scale, 6) }em
    margin: #{ $leading / nth($scale, 6) }em 0

  h2
    font-size: #{ nth($scale, 5) / $base }em
    line-height: #{ ($leading * 2) / nth($scale, 5) }em
    margin: #{ $leading / nth($scale, 5) }em 0

  h3
    font-size: #{ nth($scale, 4) / $base}em
    line-height: #{ $leading / nth($scale, 4) }em
    margin: #{ $leading / nth($scale, 4) }em 0

  h4
    font-size: #{ nth($scale, 3) / $base }em
    line-height: #{ $leading / nth($scale, 3) }em
    margin: #{ $leading / nth($scale, 3) }em 0

  h5
    font-size: #{ nth($scale, 2) / $base }em
    line-height: #{ $leading / nth($scale, 2) }em
    margin: #{ $leading / nth($scale, 2) }em 0

  h6, p
    font-size: #{ nth($scale, 1) / $base }em
    line-height: #{ $leading / nth($scale, 1) }em
    margin: #{ $leading / nth($scale, 1) }em 0



// +set-type($font-size, $leading, $scale)