Skip to main content
Jasper Bloem

Free tool

Fluid Typography Calculator

Calculate a CSS clamp() value that scales font size smoothly between a minimum and maximum viewport width.

px
px
px
px

Preview text at this screen width

Resize your browser window to see the effect.

How does CSS clamp() work?

clamp(min, preferred, max) lets a value scale smoothly between a minimum and maximum based on viewport width. This means you don't need a separate font-size per breakpoint — the text scales linearly between your bounds, and stays fixed at the minimum or maximum outside that range.