Fluid Typography Clamp
Generate a linear CSS font scale between two viewport widths.
Your numbers
CSS clamp expression
Generated CSS is a starting value. Prefer relative text units where appropriate and test zoom, text scaling and overflow.
Scenario comparison
Up to three snapshots in this tab. Loading one replaces the current inputs.
Formula
Use m = 100(f₁−f₀)/(v₁−v₀) and b = f₀−mv₀/100. The fluid size is clamp(f₀, b + m×vw, f₁); f denotes font sizes and v denotes viewport widths.
Generate a linear CSS font scale between two viewport widths.
Worked example
- Minimum font size (px)
- 16
- Maximum font size (px)
- 24
- Minimum viewport width (px)
- 400
- Maximum viewport width (px)
- 1200
- CSS clamp expression
- clamp(16px, calc(12px + 1vw), 24px)
- Viewport coefficient
- 1 vw
- Pixel intercept
- 12 px
Scope and limitations
Generated CSS is a starting value. Prefer relative text units where appropriate and test zoom, text scaling and overflow.
Inputs are checked for missing values and allowed ranges. A result outside the finite numeric range is not displayed. Rounding affects display, while the calculation uses the model’s numeric precision.
Check your units and assumptions before relying on a result. Changing a label does not convert a currency or physical unit.
Formula version: 174bffea8b3a · Example checked: