// Set min/max viewport widths for calculation
$font-min-width: 480; // min width needed for calculation
$font-max-width: 1200; // max width to for calculation

//------------------------------------//
// FONT SIZE MAP                      //
//------------------------------------//
$fonts: (
  sizes: (
    h1: (
      min: 26,
      max: 50
    ),
    h2: (
      min: 20,
      max: 28
    ),
    h3: (
      min: 16, 
      max: 18
    ),
    body: (
      min: 12, 
      max: 16
    ),
    '.small-text': (
      min: 11,
      max: 13
    )
  )
);

// FETCH NESTED KEY VALUES
@function map-fetch($map, $keys) {
  $key: nth($keys, 1);
  $length: length($keys);
  $value: map-get($map, $key);
  @if ($length > 1) {
    $rest: ();
    @for $i from 2 through $length {
      $rest: append($rest, nth($keys, $i))
    }
    @return map-fetch($value, $rest)
  } @else {
    @return $value;
  }
}

// ITERATE THROUGH SIZES AND CREATE CLASSES ACCORDINGLY
@each $size in map-keys(map-get($fonts, sizes)) {
  #{$size} { font-size: #{map-fetch($fonts, sizes $size min)}px; }
  @media (min-width: #{$font-min-width}px) and (max-width: #{$font-max-width}px){
    #{$size} { 
      font-size: calc( #{map-fetch($fonts, sizes $size min)}px + (#{map-fetch($fonts, sizes $size max )} - #{map-fetch($fonts, sizes $size min)}) * ( (100vw - #{$font-min-width}px) / ( #{$font-max-width} - #{$font-min-width}) ));
    }
  }
  @media (min-width: #{$font-max-width}px){
     #{$size} { 
       font-size: #{map-fetch($fonts, sizes $size max)}px;
     }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.