Skip to content

Instantly share code, notes, and snippets.

@dbasilioesp
Last active October 3, 2018 13:07
Show Gist options
  • Save dbasilioesp/0cc357f08481ca2c19b805670af37e4e to your computer and use it in GitHub Desktop.
Save dbasilioesp/0cc357f08481ca2c19b805670af37e4e to your computer and use it in GitHub Desktop.
Scalable Font Size
html {
font-size: calc(0.6em + 1vw);
}
$font-base: 16px;
@function font-scale($times) {
$base: $font-base;
$inc: ($base / 4) * $times;
@return (($inc + $base) / $base) * 1rem;
}
$font-medium-1: 1rem;
$font-medium-2: font-scale(1);
$font-medium-3: font-scale(2);
$font-large-1: font-scale(4);
$font-large-2: font-scale(8);
$font-large-3: font-scale(12);
.font-medium-1 {
font-size: $font-medium-1;
}
.font-medium-2 {
font-size: $font-medium-2;
}
.font-medium-3 {
font-size: $font-medium-3;
}
.font-large-1 {
font-size: $font-large-1;
}
.font-large-2 {
font-size: $font-large-2;
}
.font-large-3 {
font-size: $font-large-3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment