CSS Clamp for Flexible Font Size

Generate linear CSS font-size scale between two viewport widths.

Your numbers

CSS clamp formula wey you fit copy

—

CSS wey e generate na starting value. Use relative text units where appropriate, and test zoom, text scaling and overflow.

Formula

Use m = 100(f₁−f₀)/(v₁−v₀) and b = f₀−mv₀/100. Di fluid size na clamp(f₀, b + m×vw, f₁); f dey represent font sizes and v dey represent viewport widths.

Generate linear CSS font-size scale between two viewport widths.

Example wey show the calculation

Smallest font size (px): 16
Biggest font size (px): 24
Smallest viewport width (px): 400
Biggest viewport width (px): 1200

CSS clamp formula wey you fit copy: clamp(16px, calc(12px + 1vw), 24px)
Coefficient for viewport width: 1 vw
Constant pixel part: 12 px

Where e fit work and limits

CSS wey e generate na starting value. Use relative text units where appropriate, and test zoom, text scaling and overflow.

We check inputs for missing values and allowed ranges. Result wey pass the finite numeric range no go show. Rounding affect wetin display, while calculation use the model numeric precision.

Check your units and assumptions before you rely on result. Changing label no convert currency or physical unit.

Version of di formula: 174bffea8b3a · Example don get check: 2026-10-30

Method