Skip to content

Instantly share code, notes, and snippets.

@jonburger
Last active February 22, 2021 17:07
Show Gist options
  • Save jonburger/21a5e798d86b3b8e24d6686167be47b3 to your computer and use it in GitHub Desktop.
Save jonburger/21a5e798d86b3b8e24d6686167be47b3 to your computer and use it in GitHub Desktop.
/*
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment