CSS clamp() Generator
Generate a fluid font size or spacing value with CSS clamp() from two sizes and two screen widths.
Runs in your browser Your input never leaves your device.
| Viewport | Size |
|---|
Using rem keeps the text responsive to the user's font-size setting, which is better for accessibility. Pick the unit you want in the result. The sample uses the computed size, because a web page cannot change its own viewport.
Report a problem with this tool
About this tool
Fluid typography lets a size grow smoothly between two screen widths instead of jumping at breakpoints. Enter the size you want at a small screen (for example 16px at 320px wide) and at a large screen (24px at 1280px), and the tool works out the straight line between them and writes it as a CSS clamp(minimum, preferred, maximum) value. The preferred part combines a fixed amount with a share of the viewport width, such as 13.3333px + 0.8333vw, and the minimum and maximum stop the size from shrinking or growing outside your two values. It also works when the size shrinks as the screen grows. Choose px or rem for the result (rem follows the visitor's font-size setting, which is better for accessibility), and drag the slider to preview the size at any width. Everything runs in your browser.
How to use it
- Enter the minimum and maximum size and the unit.
- Enter the screen width where the minimum applies and the width where the maximum is reached.
- Copy the clamp() value into your CSS, for example font-size: clamp(…).
- Drag the slider or read the table to check the size at screen widths you care about.
Common problems
- The text does not scale when I zoom
- vw units ignore browser zoom on their own. Use rem for the result so the minimum and maximum follow the user's font-size setting.
- The size changes too slowly or too fast
- The slope depends on the gap between your two sizes and your two widths. Narrow the width range for a faster change.
- Both sizes are equal
- Then no fluid size is needed and the tool returns a plain value.