Cacher is the code snippet organizer for pro developers

// From:  Mike Riethmuller @ https://madebymike.com.au/writing/precise-control-responsive-typography/

// These values are the minimum and maximum viewport sizes to apply the font scaling
$min_width: 400
$max_width: 800

// These values represent the range of fon-tsize to apply
// These values effect the base font-size, headings and other elements will scale proportionally
$min_font: 12
$max_font: 24

:root
	font-size: #{$min_font}px

@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px)
  :root
    font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width}) ))

@media (min-width: #{$max_width}px)
   :root
     font-size: #{$max_font}px