Why not use actually responsive typography?

[dev-willis]

Instead of a series of static font sizes applied with media query breakpoints, why not use a function? I do it like this:

@mixin scale-font($font_min, $font_max, $min_win:320, $max_win:3840, $font_base:18){
    $slope:math.div(($font_max - $font_min), (math.div($max_win, $font_base) - math.div($min_win, $font_base)));
    $yInt:-(math.div($min_win, $font_base) * $slope) + $font_min;

    font-size: clamp( #{$font_min}rem, #{$yInt}rem + #{$slope * 100}vw, #{$font_max}rem );
}

Which I apply like this:
h1{@include scale-font(1.75, 8);}

And results in this:
h1{font-size: clamp(1.75rem, 1.1818181818rem + 3.1960227273vw, 8rem);}

Thoughts?

[Deufel]

Does this text properly zoom? (with browser tools or like "control +")

[dev-willis]

Yeah, it zooms fine.