Fluid font-sizes

_functions.scss

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
	@if type-of($number) == 'number' and not unitless($number) {
		@return $number / ($number * 0 + 1);
	}

	@return $number;
}

_mixins.scss

// -----------------------------------------------------------------------------
// Fluid font size
// -----------------------------------------------------------------------------

@mixin fluid-font-size($min, $max) {

	font-size: $min;

	@include mq(xs) {
		font-size: calc(#{$min} + #{strip-unit($max - $min)} * ((100vw - #{map-get($mq-breakpoints, xs)}) / (#{strip-unit(map-get($mq-breakpoints, md))})));
	}

	@include mq(md) {
		font-size: $max;
	}
}

_type.scss

.lead {

	margin-bottom: 25px;
	font-weight: 300;

	@include fluid-font-size(14px, 22px);

}