Clampcalc

Generate CSS clamp values to transition between two sizes at specific viewport widths. JS and Sass functions available on GitHub, demo available on CodePen.

Enter your parameters

@ / @

See the explanatory graph and parameter definitions below.

Result

clamp( Lsem , calc( Avw + Bem ) , Usem )

Wut?

So you know clamp, right? Give it a minimum size, a maximum size plus a preferred size and it'll use the preferred size where it can, limiting the size to the minimum and maximum values you give it. Cool 😎.

It's a fab way to scale text or spacing (or anything else) based on the width of the viewport but without going too small on tiny devices or too big on big ol' desktop monitors. What clamp doesn't explictly do is let you specify at what viewport widths you want the size to be at the minimum and maximum. Clampcalc's purpose is to let you do just that.

Caveat: Clampcalc does everything in em.

Explanatory graph

The computed value of a Clampcalc-generated clamp as a function of viewport width. LvwLower viewport width UvwUpper viewport width LsSize at lower viewport width UsSize at upper viewport width Computed size Viewport width

↑ The computed value of a Clampcalc-generated clamp as a function of viewport width.

Parameter definitions

Ls
Computed size at the lower viewport width and below.
Lvw
Lower viewport width.
Us
Computed size at the upper viewport width and above.
Uvw
Upper viewport width.