Fluid Type SCSS Mixin

A mixin you can use to fluidly scale type between a min and max hard stop based on media queries.

This iteration supports fluid scaling of font-size and line-height. Drop this into your mixins scss file:

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

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

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 and $u1 == $u5 and $u1 == $u6 {
    & {
      font-size: $min-font-size;
      line-height: $min-line-height;

      @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)}));
        line-height: calc(#{$min-line-height} + #{strip-unit($max-line-height - $min-line-height)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }

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

Call it on an element with this:

p {
  @include fluid-type(400px, 1200px, 14px, 26px, 20px, 36px);
}

What are all those numbers? Take a look:

p {
  @include fluid-type([min screen width], [max screen width], [min font-size], [max font-size], [min line-height], [max line-height]);
}

You can set some variables in the main variables scss file to make implementation easier. Plug in the breakpoints variables that are likely already set for the min/max screen width and create some new ones for font sizes and line height like so:

$font-size-min-m: 11px;
$font-size-max-m: 16px;

$font-size-min-l: 24px;
$font-size-max-l: 42px;

$font-size-min-xl: 44px;
$font-size-max-xl: 54px;

$line-height-min-m: 15px;
$line-height-max-m: 22px;

$line-height-min-l: 30px;
$line-height-max-l: 48px;

$line-height-min-xl: 50px;
$line-height-max-xl: 56px;

And we can bring it all together with this:

h3 {
  @include fluid-type($xsmall, $xxlarge, $font-size-min-l, $font-size-max-l, $line-height-min-l, $line-height-max-l);
}