Fluid typography means font sizes that smoothly scale between a minimum and maximum value based on the viewport width — no media queries needed. The CSS clamp() function makes this a one-liner.

Basic Syntax

font-size: clamp(MIN, PREFERRED, MAX);

• MIN — smallest allowed font size (e.g. on mobile)
• PREFERRED — fluid value, usually a vw unit that scales with viewport
• MAX — largest allowed font size (e.g. on wide screens)

Example

font-size: clamp(50px, 8vw, 100px);

This sets a minimum of 50px (mobile), scales fluidly with 8vw (viewport width), and caps at 100px (large screens). Ideal for hero headlines.

Practical Examples

/* Hero heading */
h1 { font-size: clamp(2rem, 6vw, 5rem); }

/* Section heading */
h2 { font-size: clamp(1.5rem, 4vw, 3rem); }

/* Body text */
p  { font-size: clamp(1rem, 1.5vw, 1.25rem); }

Why Not Just Use vw?

Using only font-size: 5vw means text can get too small on mobile or huge on 4K screens. clamp() adds guardrails — the font stays readable at every viewport size.

Useful Tool

Use clamp.font-size.app to generate clamp values by entering your min/max sizes and breakpoints — no manual math needed.

Pro Tips

• Use rem instead of px to respect user browser font settings.
• Combine with line-height: clamp() for fully fluid typography.
• Supported in all modern browsers — no fallback needed.