This is a more-or-less distilled SASS partial for a technique created by Mike Riethmuller. It Creates 100% responsive, fluid typography with adaptive vertical rhythm, based on the size of the viewport.

_trulyResponsiveFluidVerticalRhythm.scss

//* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
//
//      True Responsive, Fluid, Typography & Vertical Rhythm.
//      ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
//      - Typescale, vertical rhythm, etc.,
//      - respond to change in ViewPort and adjust accordingly.
//
//      This is a more-or-less distilled SASS partial for a
//      technique created by Mike Riethmuller:
//          * CodePen Account:    http://codepen.io/MadeByMike/
//          * Personal site:      http://madebymike.com.au
//   
//      CodePen Demo for this code: http://codepen.io/MadeByMike/pen/bEEGvv
//
//* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 


/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 *    FUNCTIONS
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 *    MIXINS
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {

      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }

      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 *    VARIABLES
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


// Breakpoint Variables

$min_width: 320px;
$max_width: 1200px;
$min_font: 16px;
$max_font: 24px;

$mod_1: 1.2; // mobile
$mod_2: 1.5; // desktop




/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– *
 *    STYLES
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

html {
  @include fluid-type($min_width, $max_width, $min_font, $max_font);
}

h1 {  
  font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h2 {  
  font-size: $mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h3 { 
  font-size: $mod_1*$mod_1 *1rem;
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font);
}