Responsive font-size

breakpoints.scss

$breakpoint-mobile-small-px: 375px;
$breakpoint-mobile-small-height-px: 480px;
$breakpoint-mobile-px: 425px;
$breakpoint-mobile-med-landscape-px: 568px;
$breakpoint-mobile-med-px: 768px;
$breakpoint-tablet-px: 1024px;
$breakpoint-tablet-height-px: 768px + 1px;
$breakpoint-tablet-plus-padding-px: (1024 + 32) px;
$breakpoint-laptop-small-px: 1240px;
$breakpoint-laptop-px: 1440px;
$breakpoint-laptop-large-px: 1920px;
$breakpoint-laptop-4k-px: 2560px;

$breakpoint-mobile-small: px-to-rem($breakpoint-mobile-small-px);
$breakpoint-mobile-small-height: px-to-rem($breakpoint-mobile-small-height-px);
$breakpoint-mobile: px-to-rem($breakpoint-mobile-px);
$breakpoint-mobile-med-landscape: px-to-rem($breakpoint-mobile-med-landscape-px);
$breakpoint-mobile-med: px-to-rem($breakpoint-mobile-med-px);
$breakpoint-tablet: px-to-rem($breakpoint-tablet-px);
$breakpoint-tablet-height: px-to-rem($breakpoint-tablet-height-px);
$breakpoint-tablet-plus-padding: px-to-rem($breakpoint-tablet-plus-padding-px);
$breakpoint-laptop-small: px-to-rem($breakpoint-laptop-small-px);
$breakpoint-laptop: px-to-rem($breakpoint-laptop-px);
$breakpoint-laptop-large: px-to-rem($breakpoint-laptop-large-px);
$breakpoint-laptop-4k: px-to-rem($breakpoint-laptop-4k-px);

fonts.scss

$font-family-monospace: 'Source Code Pro', Menlo, monospace;
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
  sans-serif;
$font-weight: 500;
$font-size-min: 14px;
$font-size: 18px;

functions.scss

@function px-to-rem($px) {
  @return #{$px / $font-size}rem;
}

html.scss

html {
  font-family: $font-family;
  font-weight: $font-weight;
  font-size: $font-size;

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    // font varies from $font-size at $breakpoint-tablet-px
    // to $font-size-min after $breakpoint-laptop-px
    $font-variation: ($font-size-min - $font-size) / ($breakpoint-laptop-px - $breakpoint-tablet-px);
    $font-b: $font-size - ($font-variation * $breakpoint-tablet-px);
    @media (min-width: $breakpoint-tablet-px) {
      font-size: calc(#{$font-variation * 100}vw + #{$font-b});
    }
    // cap font size decrease
    @media (min-width: $breakpoint-laptop-px) {
      font-size: $font-size-min;
    }
  }
}