Mixin to generate responsive font size. https://websemantics.uk/articles/responsive-fonts/

responsive-font-size.scss

@mixin responsive-font-size($max-font-size,$min-font-size,$max-viewport-width,$min-viewport-width) {
    @media (min-width: $min-viewport-width) {
        :root {
            $font-size-difference: $max-font-size - $min-font-size;
            $viewport-width-difference: $max-viewport-width - $min-viewport-width;
            font-size: calc(100% + ((1vw - #{$min-viewport-width / 100}) * #{100 * $font-size-difference / $viewport-width-difference}));
        }
    }

    // Stop font scaling above $max-viewport-width
    @media (min-width: $max-viewport-width) {
        :root {
            font-size: $max-font-size;
        }
    }
}

@include responsive-font-size(2em, 1em, 120em, 48em);