For years we've been wishing for a CSS min-font-size and max-font-size rule. Well it's finally here, in the form of CSS clamp();

How does it work? Let's say the element's font-size is set as clamp(1.8rem, 2.5vw, 2.8rem). This means that the font-size will be set at 1.8rem, until the computed value of 2.5vw becomes greater than that of 1.8rem. At this point, font-size will be set at 2.5vw, until 2.5vw's computed value becomes greater than that of 2.8rem. At this point, the font-size will be set at 2.8rem. clamp() allows you to set a minimum, ideal and maximum value.

clamp allows you to set a minimum, ideal and maximum value.

Before clamp();

.heading {
 &-l {
 font-size: 4.0625vw;
 line-height:1;
 letter-spacing: -.03em;
 @include media-breakpoint-up(xl){
 font-size: 4.125vw;
 }
 @include media-breakpoint-down(sm){
 font-size: 45px;
 }
 }

With clamp();

.heading {
 &-l {
 font-size: 4.0625vw; //flallback if clamp not supported.
 line-height:1;
 letter-spacing: -.01em;
 font-size: clamp(45px, 4.0625vw, 4.125vw);
 }
}