A fluid type scale
From 360px to 1280px wide, with a 16px root:
| Style | Size | CSS |
|---|---|---|
| Body | 16px → 18px | clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem) |
| H3 | 20px → 28px | clamp(1.25rem, 1.0543rem + 0.8696vw, 1.75rem) |
| H2 | 24px → 36px | clamp(1.5rem, 1.2065rem + 1.3043vw, 2.25rem) |
| H1 | 32px → 56px | clamp(2rem, 1.413rem + 2.6087vw, 3.5rem) |
| Display | 40px → 80px | clamp(2.5rem, 1.5217rem + 4.3478vw, 5rem) |
:root {
--text-body: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
--text-h3: clamp(1.25rem, 1.0543rem + 0.8696vw, 1.75rem);
--text-h2: clamp(1.5rem, 1.2065rem + 1.3043vw, 2.25rem);
--text-h1: clamp(2rem, 1.413rem + 2.6087vw, 3.5rem);
--text-display: clamp(2.5rem, 1.5217rem + 4.3478vw, 5rem);
}
body { font-size: var(--text-body); }
h1 { font-size: var(--text-h1); }Converting fixed sizes first? Use px to rem. Checking text color as well? Try the contrast checker.
Frequently asked questions
How does clamp() make font sizes fluid?
clamp(MIN, PREFERRED, MAX) uses the preferred value but never goes below MIN or above MAX. The preferred value mixes a fixed part and a viewport part, such as 0.8043rem + 0.8696vw, so the size grows in a straight line with the window width. The generator picks those numbers so the size is exactly MIN at the smaller viewport width and MAX at the larger one.
How is the preferred value calculated?
slope = (max size − min size) ÷ (max viewport − min viewport), and intercept = min size − slope × min viewport. The preferred value is intercept + slope × 100vw. For 16px at 360px wide to 24px at 1280px: slope = 8 ÷ 920 = 0.0087, which is 0.8696vw, and intercept = 16 − 0.0087 × 360 = 12.87px, or 0.8043rem.
Is fluid typography accessible?
It can fail WCAG 1.4.4 (Resize Text), which requires text to reach 200% of its size when users zoom. Zoom enlarges rem values but not the vw part, because the viewport gets narrower in CSS pixels as you zoom in. A practical rule: if the maximum size is no more than 2.5 times the minimum, zooming to 200% always enlarges the text enough. The tool checks this for you.
Why rem and not px?
rem values grow when a user raises their browser’s default font size, px values don’t. Always keep a rem part in the minimum, the maximum and the preferred value; a preferred value of only vw ignores both font-size settings and zoom.
Can I use clamp() for spacing too?
Yes. Any length works: padding, gaps, margins, widths. Fluid spacing that matches your fluid type scale keeps layouts in proportion between phone and desktop without media queries.