Design & UI Tools
CSS Clamp() Fluid Typography Generator
Generate one line of CSS that scales your font size smoothly — no media queries needed
Configure Your Fluid Scale
Font size at the smallest viewport
Font size at the largest viewport
Viewport width where scaling begins
Viewport width where scaling stops
Used to convert px values to rem
clamp() works on any CSS length property
Generated Output
CSS Declaration
font-size: clamp(1rem, 0.30rem + 3.75vw, 3rem);
Live Preview — drag bottom-right corner to resize
The quick brown fox jumps over the lazy dog
Min Size
16px
Fluid Range
320px — 1200px
Max Size
48px
The Math Behind clamp()
Given a minimum size s1 at viewport v1 and a maximum size s2 at viewport v2, the fluid slope and y-intercept are:
How to Use This Tool
- 1 Set the minimum font size — the size at your smallest viewport (e.g. 320px mobile).
- 2 Set the maximum font size — the size at your largest viewport (e.g. 1200px desktop).
- 3 Adjust the viewport range to match your design breakpoints.
- 4 Choose the CSS property you want to apply the clamp to.
- 5 Copy the generated declaration and paste it into your stylesheet.