<main class="container">

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eveniet placeat modi voluptatem quam? Corporis, aliquam accusantium quibusdam repellendus, excepturi culpa. Aperiam repellendus nesciunt, vitae adipisci. Tenetur non, natus accusamus.
    </p>
    
    <h3>Heading 3</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta possimus doloremque esse quod itaque laudantium, voluptates unde, ducimus libero, doloribus aut autem rem soluta nihil quo eius reiciendis, voluptas dignissimos.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium repellendus omnis qui recusandae enim aut maxime dignissimos, alias dolor excepturi quibusdam officiis, porro soluta quisquam, id culpa eveniet facere quasi!
    </p>
  
    <p class="small-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit cum delectus veniam praesentium voluptas mollitia accusamus exercitationem ab veritatis quod beatae, iusto, dolorum quaerat deserunt ad? Beatae nostrum ducimus dolores.
    </p>
//------------------------------------//
// THEME SETTING VARIABLES            //
//------------------------------------//

// 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

// Set min/max font sizes for each element
$min-font-h1: 26;
$max-font-h1: 50;
$min-font-h2: 20;
$max-font-h2: 28;
$min-font-h3: 16;
$max-font-h3: 18;
$min-font-body: 12;
$max-font-body: 16;
$min-font-small-text: 11;
$max-font-small-text: 13;

//------------------------------------//
// FONT SIZE MAP                      //
//------------------------------------//
$fonts: (
  sizes: (
    h1: (
      min: $min-font-h1,
      max: $max-font-h1
    ),
    h2: (
      min: $min-font-h2, 
      max: $max-font-h2
    ),
    h3: (
      min: $min-font-h3, 
      max: $max-font-h3
    ),
    body: (
      min: $min-font-body, 
      max: $max-font-body
    ),
    '.small-text': (
      min: $min-font-small-text,
      max: $max-font-small-text
    )
  )
);

// 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;
     }
  }
}


// DO NOT REPLICATE
// - The following styles are specifically for this pen and will do you no good beyond this. 
* {
    box-sizing: border-box;
}
.container, footer {
    margin: auto;
    padding: 1rem;
    width: 100%;
    @media screen and (min-width: 640px) {
        width: 600px;
    }
}
footer {
    
}

.text-right {
    text-align: right;
}
.no-top-margin {
    margin-top: 0;
}
.no-bottom-margin {
    margin-bottom: 0;
}
.flex {
    display: flex;
}

.flex--vert-center {
    align-items: center;
}
View Compiled
//------------------------------------//
// NOTES                              //
//------------------------------------//
// By setting 

//------------------------------------//
// CREDITS                            //
//------------------------------------//
// The responsive typography algorithm is by MadeByMike on Codepen 
// https://codepen.io/MadeByMike/pen/YPJJYv

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.