Fluid typography with SASS

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

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);

@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
& {
font-size: $min-font-size;
@media screen and (min-width: $min-vw) {
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
}
@media screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
}
}

Usage

$min_width: 320px;
$max_width: 1200px;
$min_font: 16px;
$max_font: 24px;

html {
@include fluid-type($min_width, $max_width, $min_font, $max_font);
}

.SASS

@function strip-unit($value)
@return $value / ($value * 0 + 1)

=fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size)
$u1: unit($min-vw)
$u2: unit($max-vw)
$u3: unit($min-font-size)
$u4: unit($max-font-size)

@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4
&
font-size: $min-font-size;
@media screen and (min-width: $min-vw)
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));

@media screen and (min-width: $max-vw)
font-size: $max-font-size;
@else
@error "Detected mixed units. Please use the same units for all parameters. " + $u1 +", " + $u2 + ", " + $u3 +", "+ $u4;

Refrences

https://css-tricks.com/snippets/css/fluid-typography/

Let me know what you think on twitter @rdallaire

← Return to blog