How to fluid typography vs media query steps
- Step 1Stepped (media queries) — h1 { font-size: 24px } @media (min-width: 768px) { h1 { font-size: 32px } } @media (min-width: 1280px) { h1 { font-size: 48px } }. Discrete sizes per breakpoint. Easy to reason about; doesn't scale beyond the largest breakpoint.
- Step 2Fluid (clamp) — h1 { font-size: clamp(1.5rem, 1rem + 2vw, 3rem) }. Smooth interpolation. Single declaration. Works at any viewport width including non-standard ones.
- Step 3Hybrid — Tailwind-style base sizes per breakpoint + fluid override on critical headlines. Predictable for components; fluid for hero typography.
Frequently asked questions
Browser support for clamp()?+
95%+ globally — Chrome 79+, Firefox 75+, Safari 13.1+. Older browsers fall back to font-size declared elsewhere or browser default. Safe to use as primary strategy in 2026.
Does fluid hurt CLS?+
No — clamp() resolves at layout time, before CLS measurement begins. Stepped sizing can produce CLS at media-query breakpoints if not carefully managed. Fluid is actually better for CLS.
Is fluid harder to test?+
Slightly — designers test at breakpoints (320, 768, 1280, 1440px). Add 480 and 1024 to the test list when using fluid; smooth interpolation means in-between widths matter.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.