SASS @mixing that scales font size proportionally to screen width, with lower and upper limit...

scale-font-size-proportionally-to-screen-size.scss

/*
Scales a font proportionally to the screen size, from -> to
All parameters are pixels, but don't add the 'px' units!

It adds mediaqueries to fix font-size upper and lower limit

@include autoscale-font (
   //  320 screen width -> font size 24px
  320,  24,
  // 1600 screen width -> font size 64px
  1600, 64
);

Outputs something like:
font-size: 64px;
font-size: calc( 24px + (64 - 24) * ( ( 100vw - 320px ) / ( 1600 - 320 ) ) );
@media only screen and (min-width: 1600px)
  .title {
    font-size: 64px;
  }
}

*/
@mixin autoscale-font (
  $min-screen-width, $min-font-size,
  $max-screen-width, $max-font-size,
  $default-font-size: $max-font-size // Optional
) {
  font-size: #{$max-font-size}px; // Default
  font-size: calc( #{$min-font-size}px + (#{$max-font-size} - #{$min-font-size}) * ( ( 100vw - #{$min-screen-width}px ) / ( #{$max-screen-width} - #{$min-screen-width} ) ) );
  // Define minimun only if necessary
  @if ( $min-screen-width > 320 ) {
    @media only screen and (max-width: #{$min-screen-width}px) {
      & { font-size: #{$min-font-size}px ; }
    }
  }
  // Upper limit
  @media only screen and (min-width: #{$max-screen-width}px) {
    & { font-size: #{$max-font-size}px ; }
  }
}