Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Sass Mixin: Fluid Text
// fluidly resize type
// based on example here
@mixin fluid-type($font-min, $font-max, $screen-min, $screen-max) {
font-size: #{$font-min}px;
@media only screen and (min-width: #{$screen-min}px) {
font-size: calc(
#{$font-min}px + #{($font-max - $font-min)} * (100vw - #{$screen-min}px) / (#{$screen-max} - #{$screen-min})
@media only screen and (min-width: #{$screen-max}px) {
font-size: #{$font-max}px;
.my-text {
@include fluid-type(16, 32, 480, 1500);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.