Fluid Typography Mixin (SCSS)

fluid-type.scss

// This mixin can be used to provide Fluid Type behaviour accross your entire web page
// or to a single css selector
//
// Full credit goes to Geoff Graham @ https://css-tricks.com/snippets/css/fluid-typography/
// 
// To apply globally:
// 
// 1. Define your minimum and maximum screen widths
// 2. Define your min and max font size for H1 element in px
// 3. Apply fluid-type mixin to root element eg.
//     html {  
//       @include fluid-type(
//         $min_screen_width,
//         $max_screen_width,
//         $min_font_size,
//         $max_font_size
//       )
//     }
// 4. Generate px to rem table from https://nekocalc.com/px-to-rem-converter. 
//    (NOTE: you will need to set the rootfont size to you max_font_size when generating)
// 5. Assign REM values to font-size as required

// ------  Breakpoints and limits------ //
$min_screen_width: 360px;
$max_screen_width: 1448px;
$min_font_size: 38px;
$max_font_size: 52px;

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

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