min-max responsive font size

font-size-range.scss

// Variables

$base-font-size: 16px;
$min-screen-size: 320px;


// Utility functions

/**
 * Get font-size in point size (em)
 * @param     $font-size {Number} font size in pixel
 * @param     $$contex   {Number} base font size in pixel
 * @return    {Number} font-size in em
 */

@function em($target, $context: $base-font-size) {
	@if $target == 0 { @return 0 }
	@return $target / $context + 0em;
}

/**
 * Get font-size in viewport width (vw)
 * @param     $font-size	{Number} font size in pixel
 * @param     $viewport-width	{Number} viewport width in pixel
 * @return    {Number} font-size in vw
 */

@function vw($font-size, $viewport-width: $min-screen-size) {
	$percent: $font-size / $viewport-width * 100;
	@return $percent * 1vw;
}

/**
 * Compute breakpoint (screen min-width) for max-font-size
 * @param     $min-font-size {Number} the minimum font size in pixel
 * @param     $max-font-size {Number} the maximum font size in pixel
 * @return    {Number} screen min-width in em
 */

@function max-font-screen-width($min-font-size, $max-font-size) {
	$max-width: $max-font-size * (100vw / vw($min-font-size));
	@return em($max-width);
}

// Mixins

/**
 * Create font-size range
 * @param     $min {Number} the minimum font size in pixel
 * @param     $max {Number} the maximum font size in pixel
 */

@mixin font-size-range($min, $max) {
	$breakpoint: max-font-screen-width($min, $max);

	font-size: em($min);

	@media screen and (min-width: em($min-screen-width)) {
		& {
			font-size: vw($min);
		}
	}

	@media screen and (min-width: $breakpoint) {
		& {
			font-size: em($max);
		}
	}
}

min-max-font-size.scss

// Usage
.headline {
	@include font-size-range(16px, 24px);
}

// Output
.headline {
	font-size: 1em;
}

@media screen and (min-width: 20em) {
	.headline {
		font-size: 5vw;
	}
}

@media screen and (min-width: 30em) {
	.headline {
		font-size: 1.5em;
	}
}