fluid-typography.scss

/*
See: https://www.smashingmagazine.com/2016/05/fluid-typography/

1. without support for anything, the font size will be the minimum font-size (14px) so nothing will break.
2. with support for mediaqueries and not vw or calc or both then the font will jump up a pixel size at every appropriate breakpoint (I'm using http://include-media.com for syntactic-sugar, but you could rewrite without this)
3. with support for mediaqueries and calc and vw it will work as the article describes, with the fixes for older Safari and IE too

Ain't it pretty!? Haha - works well tho :)
*/

$base_font-size-min:14px;
$base_font-size-min-at-width:320px;

$base_font-size-max:18px;
$base_font-size-max-at-width:2560px;

@function strip-units($number) {
	@return $number / ($number * 0 + 1);
}

html {
	line-height:1.5; // 24px at font-size 16px
	
	font-size:$base_font-size-min;
	
	$steps: strip-units($base_font-size-max - $base_font-size-min);
	$increment: ($base_font-size-max-at-width - $base_font-size-min-at-width) / $steps;
	@for $i from 0 through ($steps - 1) {
		$base_font-size-at-breakpoint: $base_font-size-min-at-width + $i * $increment;
		@include media(">#{$base_font-size-at-breakpoint}") {
			font-size:$base_font-size-min + ($base_font-size-max - $base_font-size-min) * ($base_font-size-at-breakpoint - $base_font-size-min-at-width) / ($base_font-size-max-at-width - $base_font-size-min-at-width);
			font-size:calc(#{$base_font-size-min} + #{strip-units($base_font-size-max - $base_font-size-min)} * (100vw - #{$base_font-size-min-at-width}) / #{strip-units($base_font-size-max-at-width - $base_font-size-min-at-width)});
		}
	}
	
	@include media(">#{$base_font-size-max-at-width}") {
		font-size:$base_font-size-max;
	}
}