CSS Clamp Generator (Fluid Typography)

How to use

1. Enter the smallest and largest size you want, in pixels.
2. Enter the viewport widths where scaling should start and stop.
3. Drag the preview slider to check the size at different widths, then copy the CSS.

What this tool does

It solves the straight line between your two points: slope = (max size − min size) ÷ (max width − min width), then writes clamp(min, intercept + slope × 100vw, max) using rem units so the value respects the user’s browser font size.

Why it matters

Fluid values remove the need for many breakpoint-specific font sizes, and keep headings in proportion on every screen.

Example

From 18 px at 360 px wide to 24 px at 1280 px wide gives font-size: clamp(1.125rem, 0.9783rem + 0.6522vw, 1.5rem);

Tips

• Keep the maximum no more than about 2.5 times the minimum so text still zooms properly (WCAG 1.4.4).
• In Elementor, paste the clamp() value into a typography size field set to the custom unit.