Shrimpton Agency

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 { 
    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 { 
    font-size: 4.0625vw; //flallback if clamp not supported.
    line-height:1; letter-spacing: -.01em;
    font-size: clamp(45px, 4.0625vw, 4.125vw); 
}

min(), max(), and clamp() are CSS functions that allow you to set dynamic values for properties. These functions can be useful for making responsive layouts that adapt to different screen sizes. Here's how to use them:

min(): Returns the minimum of two or more values. For example, min(100px, 50vw) will return the smallest value between 100px and 50vw.

/* Example usage of min() */
width: min(300px, 100%);
font-size: min(1.2em, 5vw);

max(): Returns the maximum of two or more values. For example, max(100px, 50vw) will return the largest value between 100px and 50vw.

clamp(): Takes three values: a minimum value, a preferred value, and a maximum value. The function returns the preferred value, unless it falls outside the minimum and maximum values, in which case it returns the closest boundary value.

/* Example usage of clamp() */
width: clamp(300px, 50%, 1000px);
font-size: clamp(1.2em, 5vw, 2em);

In the examples above, we've used min(), max(), and clamp() functions to set the width and font-size properties. By using these functions, the layout adapts to different screen sizes, with the values changing based on the available viewport width.

Note that these CSS functions may not be supported by all browsers, so it's important to test your layout on different browsers and devices.