[Fluid Type Sass Mixin and Headers with Modular Scale] Reference: - [Fluid Typography | CSS-Tricks - CSS-Tricks](https://css-tricks.com/snippets/css/fluid-typography/) - [Complete Guide To Fluid Typography With CSS Clamp](https://www.lambdatest.com

fluid-headers.scss

$small-ratio: 1.2; // mobile
$large-ratio: 1.5; // desktop
 
h1 {  
  $small: $small-ratio * $small-ratio * $small-ratio * $small-ratio * 1rem; 
  $large: $large-ratio * $large-ratio * $large-ratio * $large-ratio * 1rem;
  font-size: fluid($small, $large);
}

h2 {  
  $small: $small-ratio * $small-ratio * $small-ratio * 1rem; 
  $large: $large-ratio * $large-ratio * $large-ratio * 1rem;
  font-size: fluid($small, $large);
}

h3 { 
  $small: $small-ratio * $small-ratio * 1rem;
  $large: $large-ratio * $large-ratio * 1rem;
  font-size: fluid($small, $large);
}

fluid-type.scss

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.6.2)
// ----

// =============================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//  https://www.madebymike.com.au/writing/precise-control-responsive-typography/
//
//  Borrowed `strip-unit` function from Hugo Giraudel
//  https://css-tricks.com/snippets/sass/strip-unit-function/
//
//  02.04.2018 Remove `screen` keyword from media queries
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =============================================================================

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

/* Single property */
html {
  @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
}

/* Multiple properties with same values */
h1 {
  @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
}

fluid.scss

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

@function fluid($min-value, $max-value, $min-screen: 20em, $max-screen: 100em) {
	$ideal: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-screen}) / #{strip-unit($max-screen - $min-screen)});
  @return clamp(#{$min-value}, #{$ideal}, #{$max-value});
}

// example
h1 {
  font-size: fluid(16px, 30px);
}

headers.scss

$mod_1: 1.2; // mobile
$mod_2: 1.5; // desktop

h1 {  
  font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h2 {  
  font-size: $mod_1*$mod_1*$mod_1 *1rem; 
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font);
}
h3 { 
  font-size: $mod_1*$mod_1 *1rem;
  @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font);
}

interpolate-mixin.scss

// I'm now recommending this technique:

@mixin interpolate($properties, $min-screen, $max-screen, $min-value, $max-value) {
	& {
		@each $property in $properties {
			#{$property}: $min-value;
		}

		@media screen and (min-width: $min-screen) {
			@each $property in $properties {
				#{$property}: calc-interpolation($min-screen, $min-value, $max-screen, $max-value); 
			}
		}

		@media screen and (min-width: $max-screen) {
			@each $property in $properties {
				#{$property}: $max-value;
			}
		}
	}
}

// Requires the calc-interpolation function which can also be used independently

@function calc-interpolation($min-screen, $min-value, $max-screen, $max-value) {
	$a: ($max-value - $min-value) / ($max-screen - $min-screen);
	$b: $min-value - $a * $min-screen; 

	$sign: "+";
	@if ($b < 0) {
		$sign: "-";
		$b: abs($b);
	}
	@return calc(#{$a*100}vw #{$sign} #{$b});
}

// Indrek Pass also has a fantastic mixin here: http://sassmeister.com/gist/7f22e44ace49b5124eec


/* Single property */
html {
	@include interpolate(font-size, 320px, 1366px, 14px, 20px);
}

/* Multiple properties with same values */
h1,h2,h3,h4,h5 {
	@include interpolate((padding-top, padding-bottom), 20rem, 70rem, 0rem, .5rem);
}