This is a tool that calculates the clamp formula needed to interpolate between a minimum value and a maximum value in a given viewport range. You can choose to use pixels or rems as a unit for the minimum and maximum values.
Calculated Result:
clamp(1rem, 0.818rem + 0.91vw, 1.5rem) Live font-size example
This text uses the calculated clamp formula. It gets invisible when you use 0 or negative numbers as a min-value. 🥲 Try editing it, though...
So, what is this about?
At 9elements, we use Utopia in many of our projects to create fluid scales for type and spacing using CSS clamp() and not relying on media queries. Even on this website that you’re visiting right now, we use a type scale generated by the handy tool created by James Gilyead & Trys Mudford. You might have guessed it already – we love Utopia!
Yet sometimes, you don’t need a whole token system but a single interpolation between two values in a viewport range. That’s why we created this tool to help you with just that.
Bonus: You can use negative values for the min-value. That may be needed in rare situations for margins or absolute positioning. See example below.
Some Examples
See the Pen min-max-interpolation example by Nils Binder (@enbee81) on CodePen.