Fluid Typography Calculator — CSS clamp()
Generate a CSS clamp() that scales font-size smoothly between two viewport widths — no breakpoints needed.
743 views
Max values must exceed min values
Live preview (resize the window):
Almost before we knew it, we had left the ground.
The clamp() Recipe
Fluid type interpolates linearly between a minimum size at a small viewport and a maximum at a large one: slope = (max−min font) ÷ (max−min viewport), then font-size: clamp(minRem, interceptRem + slope·100vw, maxRem). For 16→24 px between 375→1280 px viewports, that is clamp(1rem, 0.793rem + 0.884vw, 1.5rem) — exactly 16 px at 375, exactly 24 px at 1280, smooth in between, capped outside.
The rem part of the preferred value matters for accessibility: a pure-vw formula ignores the user's browser font-size setting entirely, while the rem intercept keeps zoom and large-text preferences working. This calculator always emits the mixed form.
Frequently Asked Questions
Which viewport range should I use?
375 px (a common phone) to your content max-width — often 1200-1440 px. Below/above the range clamp() freezes at min/max, so nothing breaks on watches or ultrawides.
Can I use this for spacing too?
Yes — the same math works for padding, margins and gaps. Generate with your min/max spacing values and put the clamp() in a custom property.
Why is my text not exactly the min size on my phone?
Check the actual CSS viewport width (device pixels ÷ DPR). A "390 px" phone is wider than a 375 px range start, so the size is already slightly above the minimum — by design.
Similar Tools
Report a Problem
Fluid Typography Calculator — CSS clamp()