Fluid typography between a min & max font-size and molten leading

fluid-typography.scss

// Fluid typography between a min & max font-size and molten leading
// calc(minSize + (maxSize - minSize) * ((100vw - minPort) / (maxPort - minPort)));
// Works best with `em` or `rem` units
$typography: (
  'font-min': 1em,
  'font-max': 1.5em,
  'lead-min': 1.3em,
  'lead-max': 1.7em,  
  'width-min': 20em,
  'width-max': 80em,  
) !default;

html { 
  // Strip units from values  
  // Helper functions are within `html` block to avoid cluttering the global scope
  @function _strip-unit($num) {
    @return $num / ($num * 0 + 1);
  }
  
  // Variables are within `html` block to avoid cluttering the global scope
  $font-min: map-get($typography, font-min);
  $font-max: map-get($typography, font-max);
  $lead-min: map-get($typography, lead-min);
  $lead-max: map-get($typography, lead-max);  
  $width-min: map-get($typography, width-min);
  $width-max: map-get($typography, width-max);
  $strip-font-min: _strip-unit($font-min);
  $strip-font-max: _strip-unit($font-max);
  $strip-lead-min: _strip-unit($lead-min);
  $strip-lead-max: _strip-unit($lead-max);  
  $strip-width-min: _strip-unit($width-min);
  $strip-width-max: _strip-unit($width-max);
  
  // Default to  min `font-size` and `line-height`
  font-size: $font-min; 
  line-height: $lead-min;
  
  // Have `font-size` and `line-height` adjust based on viewport width
  @media (min-width: $width-min) {
    font-size: calc(#{$font-min} + (#{$strip-font-max} - #{$strip-font-min}) * ((100vw - #{$width-min}) / (#{$strip-width-max} - #{$strip-width-min})));
    line-height: calc(#{$lead-min} + (#{$strip-lead-max} - #{$strip-lead-min}) * ((100vw - #{$width-min}) / (#{$strip-width-max} - #{$strip-width-min})));
  }
  
  // Default to max `font-size` and `line-height` on large viewports
  @media (min-width: $width-max){
    font-size: $font-max;
    line-height: $lead-max;
  }  
}