Fluid typography that scales smoothly with the viewport size is a hallmark of modern responsive design. The CSS clamp() function makes this possible by setting a minimum size, a preferred (scalable) size, and a maximum size. Our generator does the complex math for you. Just provide the minimum and maximum font and viewport sizes, and it will create a perfect, one-line clamp() function to create truly fluid and responsive text.
↔️CSS Clamp() Generator
Frequently Asked Questions
How does clamp() work?
clamp() takes three arguments: a minimum value, a preferred value, and a maximum value. The browser will use the preferred value (often a viewport-relative unit like `vw`) as long as it's between the minimum and maximum. If it goes outside those bounds, it's 'clamped' to the min or max.
What is the browser support for clamp()?
The CSS clamp() function is supported by all modern evergreen browsers, including Chrome, Firefox, Safari, and Edge. It is not supported in Internet Explorer.
