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(u.rem(16), calc(0.833rem + 0.89vw), u.rem(24)) 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?
I created a GitHub Fork and adapted the calculator to output the clamp function nested with a calc function. This allows me to use it in a Joomla/YooTheme environment with SASS.
The original project is by 9elements and was created by Nesim and Nils. It can be found here.
9elements uses Utopia in many of their projects to create fluid scales for type and spacing using CSS clamp() and not relying on media queries.
Even this website that you’re visiting right now uses a type scale generated by the handy tool created by James Gilyead & Trys Mudford.