SASS Mixin for fluid type sizes | CSS
Add the following in your mixins .scss file:
// RESPONSIVE FONTS @include fluid-type(1.3rem, 1.7rem);
@mixin fluid-type($min-font-size: 1.3rem, $max-font-size: 2.2rem, $lower-range: 540px, $upper-range: 960px) {
font-size: calc(#{$min-font-size} + #{(($max-font-size / ($max-font-size * 0 + 1)) - ($min-font-size / ($min-font-size * 0 + 1)))} * ( (100vw - #{$lower-range}) / #{(($upper-range / ($upper-range * 0 + 1)) - ($lower-range / ($lower-range * 0 + 1)))}));
@media screen and (max-width: $lower-range) {
font-size: $min-font-size;
}
@media screen and (min-width: $upper-range){
font-size: $max-font-size;
}
}
Then call that mixin within your theme .scss files with:
.div {
@include fluid-type(1rem, 3rem);
font-weight: 300;
}
Finally, make sure you set your html tag to have a set font-size as a percentage e.g. 62.5%…
html {
font-size: 62.5%;
}