What is fluid typography with clamp()?
Classic responsive design changes font sizes in steps with media queries: 16px on mobile, 20px on tablet, 24px on desktop. Fluid typography makes the size grow smoothly with the width of the viewport instead. The CSS clamp() function does it in one line: clamp(minimum, preferred, maximum). The preferred value mixes a fixed part and a vw part, so it grows with the screen, while the minimum and maximum keep it within limits.
The hard part is the middle value. To go from exactly 16px at 320px wide to exactly 32px at 960px wide you have to calculate the slope and intercept of a line. This generator does the maths: enter the minimum and maximum values and the viewport widths where they should apply, and you get something like clamp(1rem, 0.5rem + 2.5vw, 2rem), with the slope and intercept explained so you can see where each number comes from.
You can work in px or rem. rem is recommended for font sizes because it respects the user's browser font size setting; the root font size (16px by default) is configurable. A viewport slider shows the computed size at any width, so you can check the result before using it. The same technique works for padding, margins and gap, not just text.
Using clamp() for a whole type scale means fewer media queries to maintain and no sudden jumps in size when a breakpoint is crossed. Each heading level gets its own min and max, and the page looks balanced at every width in between. The generator runs in your browser and is free to use without limits: no sign-up and no Pro needed.
How to generate a clamp() value
- Enter the minimum and maximum value (for example 16 and 32).
- Enter the viewport widths where they apply (for example 320 and 960).
- Choose px or rem and, if needed, change the root font size.
- Move the viewport slider to preview the computed size at any width.
- Copy the clamp() value and use it for font-size, padding, gap or margins.
Where to use clamp()
- Fluid headings that scale from mobile to desktop.
- Body text that grows slightly on large screens.
- Section padding and margins that adapt to the viewport.
- Grid and flex gap that tightens on small screens.
- A full fluid type scale for a design system.
The clamp() formula
slope = (max size - min size) / (max viewport - min viewport). intercept = min size - slope × min viewport. preferred = intercept + (slope × 100)vw. Example: 16px at 320px and 32px at 960px. slope = 16 / 640 = 0.025, so 2.5vw. intercept = 16 - 0.025 × 320 = 8px = 0.5rem. Result: clamp(1rem, 0.5rem + 2.5vw, 2rem). Below 320px the size stays at 1rem, above 960px at 2rem, and in between it grows in a straight line.
Accessibility note
Text sized only in vw does not grow when users zoom. Mixing a rem intercept with the vw part, as the generator does, keeps the text responsive to zoom and to the browser font size setting. Avoid a very steep slope, and keep the maximum no more than about 2.5 times the minimum so zooming still makes a visible difference.
Frequently Asked Questions
Is the clamp generator free?
Yes. The CSS generators are free to use without limits, with live preview and Copy CSS.
Should I use px or rem?
rem for font sizes, because it respects the user's font size setting. px is fine for spacing if your project uses it.
Can I use clamp() for spacing?
Yes. The same value works for padding, margin, gap or any length property.
Is clamp() supported by browsers?
Yes, all current browsers support clamp().
What happens outside the viewport range?
Below the minimum width the value stays at the minimum and above the maximum width it stays at the maximum.