Design Toolspublic tool
Clamp Generator
Fluid typography with CSS clamp(). Enter a min and max size plus the viewport range, and get the formula, the slope, the intercept and the rendered size at common breakpoints.
- Formula
- clamp(1rem, 0.0005rem + 0.8043rem, 1.5rem)
- Slope
- 0.008696
- Y-intercept
- 12.87
- Viewport range
- 360px → 1280px
Preview
Font size clamp(1rem, 0.0005rem + 0.8043rem, 1.5rem)
The quick brown fox jumps over the lazy dog
Resize the window between 360px and 1280px to watch the ramp move continuously, without a single media query.
Inputs
Minimum and maximum size, minimum and maximum viewport
px
px
px
px
CSS
font-size declaration
font-size: clamp(1rem, 0.0005rem + 0.8043rem, 1.5rem);
Tailwind v4
Arbitrary-value text class
text-[clamp(1rem,_0.0005rem_+_0.8043rem,_1.5rem)]
Formula
How the clamp is derived
- Slope
- (24px − 16px) ÷ (1280px − 360px) = 0.008696
- Y-intercept
- 16px − 0.008696 × 360px = 12.87px
- rem equivalents
- 1rem → 1.5rem at a 16px root
Rendered values
Font size at common viewport widths
| Viewport | Raw | Clamped |
|---|---|---|
| 360px | 16px | 16px |
| 768px | 19.55px | 19.55px |
| 1024px | 21.77px | 21.77px |
| 1440px | 25.39px | 24px |