Web Typography Scale

_base.scss

/*
 * Based off of the blog post "A More Modern Scale for Web Typography" 
 * - http://typecast.com/blog/a-more-modern-scale-for-web-typography 
 */

html {
  font-size: 16px;
}

body {
  font-size: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size-adjust: 0.5;
}

/* Body Content */
#main {
  @include respond(
    (
      font-size: 1em,
      line-height: (
        1.25,
        1.375
      )
    )
  );
}

h1 {
  @include respond(
    (
      font-size: (
        2em,
        2.5em,
        3em
      ),
      line-height: (
        1.25,
        1.125,
        1.05
      )
    )
  );
}

h2 {
  @include respond(
    (
      font-size: (
        1.625em,
        2em,
        2.25em
      ),
      line-height: (
        1.15384615,
        1.25
      )
    )
  );
}

h3 {
  @include respond(
    (
      font-size: (
        1.375em,
        1.5em,
        1.75em
      ),
      line-height: (
        1.13636364,
        1.25
      )
    )
  );
}

h4 {
  @include respond(
    (
      font-size: 1.25em,
      line-height: (
        1.11111111,
        1.22222222
      )
    )
  );
}

blockquote {
  @include respond(
    (
      font-size: (
        1.25em,
        1.5em
      )
      line-height: 1.45833333
    )
  );
}

_breakpoints.scss

/** Breakpoints */
$mobile: 0; // mobile
$tablet: 43.75em; // tablet @ 700px
$desktop: 56.25em; // desktop @ 900px
$wide: 80em; // hd @ 1280px

$breakpoints: (
  mobile: $mobile,
  tablet: $tablet,
  desktop: $desktop,
  wide: $wide
);

$breakpoints_keyless: ($mobile, $tablet, $desktop, $wide);

_respond.scss

*---------------------------------------------------------------*\
  RESPONSIVE PROPERTY HANDLER
    handles the per-breakpoint property for mobile-first approach
    note: requires a key-less 'breakpoints' scss map
          e.g. $breakpoints_keyless: ( 320px, 760px, 1080px, 1280px );
    usage:
      @include respond((
        display: flex,
        margin: (2px, 3px, 4px, 5px),
        padding: (3rem, 4rem, 5rem, 6rem),
        flex: ("0 1 50%", null, (1 1 100%))
      ));
\*---------------------------------------------------------------*/

@mixin respond($args) {
  @for $bp from 1 through length($breakpoints_keyless) {
    // loop through all the breakpoints
    @media screen and (min-width: #{nth($breakpoints_keyless, $bp)}) {
      // set media query
      @each $propname, $propvalues in $args {
        // loop through all the properties
        @if $bp <= length($propvalues) {
          // check if the number of values is less than the number of breakpoints
          $value: unquote(#{nth($propvalues, $bp)});
          @if ($propname != null) {
            #{$propname}: $value; // apply value to the property
          }
        }
      }
    }
  }
}