How to fluid typography in the wild: real examples
- Step 1Hero/marketing pattern — h1 { font-size: clamp(2.5rem, 5vw + 1rem, 6rem); }. Min 40px (mobile), max 96px (ultrawide). Designs that need brand impact at every size.
- Step 2Body content pattern — p { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }. Min 16px, max 18px. Subtle scaling — keeps body legible everywhere without dramatic shifts.
- Step 3Subtle pattern (Stripe, Linear) — h2 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2.25rem); }. Mid-range scaling for section headlines. Visible interpolation but not dramatic.
Frequently asked questions
How do they handle the slope?+
Common slopes: 1.0667vw (16:24 over 320–1280), 0.5333vw (16:20 over 320–1280), 0.8vw (mid). The Generator computes precisely; in practice most designs use round numbers like 0.5vw or 1vw.
What about the 'body sizes seem too small at 4K' problem?+
Add an explicit max viewport (e.g., 1440 or 1920). Beyond that, the size stays fixed. Or set max bounds at the high end (24px body cap) so even 4K doesn't push body to unreadable largeness.
Should I use vh or vw?+
vw — width-based scaling is what users perceive. vh-based fluid typography responds to browser height which is irrelevant for reading. vw aligns with how people actually consume typography.
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.