Blog Post

CSS Clamp Function

Clamp() – a CSS function for keeping a value between two extremes. The value won’t go above the max value and won’t go below the min value. This is particularly great for responsive design and font sizes. You can set the font-size in vw units so that it scales seamlessly as the page’s size changes. However, that’s likely to make the text too small to read on some mobile devices and might make it way too big on a particularly large desktop monitor. Thus clamp allows us to set thresholds across which the font-size doesn’t go, but still have text that seamlessly scales with the size of the window.
    font-size: clamp( min, variable-size, max );
    font-size: clamp(1.25rem, 3vw, 5rem);