Question 1

What is CSS clamp() and what arguments does it take?

Accepted Answer

CSS clamp(min, preferred, max) takes three arguments. The min value is the smallest the property can be, the preferred value is the ideal (usually a vw + rem expression), and the max is the upper bound. The browser always keeps the result between min and max, regardless of the preferred calculation.

Question 2

How is the vw + rem formula inside clamp() calculated for fluid typography?

Accepted Answer

The slope is (maxSize - minSize) / (maxViewport - minViewport). Multiplied by 100, this gives the vw coefficient. The rem intercept is (minSize - slope × minViewport) / rootSize. The final clamp is: clamp(minRem, slopeVw + interceptRem, maxRem). This ensures the font size is exactly minSize at minViewport and maxSize at maxViewport.

Question 3

What is the difference between fluid typography with clamp() and responsive typography with @media queries?

Accepted Answer

Media queries produce abrupt jumps at defined breakpoints — the font size snaps from one value to another. clamp() produces a smooth linear interpolation between two sizes across the entire viewport range. No breakpoints are needed, the code is shorter, and the result is more polished visually.

Question 4

How do I integrate the generated clamp() values into a design system or Tailwind?

Accepted Answer

For vanilla CSS, declare the values as custom properties in :root (e.g., --text-lg: clamp(1.125rem, 1.5vw + 0.75rem, 2rem)) and use them throughout your stylesheets. For Tailwind v3, add them to theme.extend.fontSize in tailwind.config.js. For Tailwind v4, use @theme in your CSS file with the custom properties directly.

Question 5

What is the browser support for clamp() in 2025, and what are the fallbacks?

Accepted Answer

CSS clamp() has been supported in all major browsers since 2020 (Chrome 79, Firefox 75, Safari 13.1, Edge 79). Global support is over 97%. For the rare legacy browsers that lack support, the tool also generates a px-only fallback that you can place before the clamp() declaration.

Question 6

When should I use clamp() for font-size vs for padding, margin, gap?

Accepted Answer

clamp() works for any length property that benefits from fluid scaling. For typography, it eliminates the need for font-size @media overrides. For spacing (padding, margin, gap), it creates layouts that breathe proportionally. However, avoid using clamp() where abrupt control is required.

Question 7

Why might the text not scale as expected — common mistakes with clamp()?

Accepted Answer

Common issues: (1) Wrong root font size — if the user or a parent sets a different rem base, the rem intercept will be off. (2) Mixed units without conversion. (3) Min greater than max — the clamp collapses. (4) Very large vw coefficient — the font grows too fast. Always test with the viewport simulator before shipping.

CSS Clamp Generator

What is CSS clamp() for fluid typography?

Frequently asked questions

Explore Our Network