In traditional responsive web development, engineers often use media queries (@media) to switch heading sizes abruptly at a few fixed breakpoints, such as 768px, 1024px, and 1440px. Besides adding redundant code, this frequently causes sudden size changes or unexpected wrapping at intermediate viewport widths, including foldable phones, small laptops, and ultrawide monitors.
Fluid Typography uses the native CSS clamp(MIN, VAL, MAX) function to scale type smoothly and linearly between a minimum viewport, such as a 375px phone, and a maximum viewport, such as a 1440px desktop. Outside those boundaries, font sizes automatically stop at their specified minimum and maximum.
1. Why should the preferred value not use only vw?
Many introductory tutorials suggest code such as font-size: clamp(1.5rem, 4vw, 3rem). This has a serious accessibility flaw: the preferred middle value, 4vw, depends entirely on viewport width. When a user with impaired vision presses Ctrl/Cmd + to zoom the page to 200%, vw units do not respond to browser font scaling, preventing text from enlarging and directly violating WCAG 2.1 AA (Success Criterion 1.4.4, Resize Text).
The correct engineering approach is to express the preferred value as a combination of rem + vw, for example:
/* H1 heading: 32px (2rem) at a 375px viewport, scaling smoothly to 56px (3.5rem) at 1440px */
h1 {
font-size: clamp(2rem, 1.47rem + 2.25vw, 3.5rem);
line-height: 1.15;
}
This retains smooth responsiveness to screen width while fully responding to the user's base font-size settings and page zoom in the browser.
2. Recommended fluid type sizes across four design-system levels
In JVDS responsive website development standards, we generally advise against allowing all small text to change dramatically with viewport width. Instead, display headings use a steeper scaling slope, while body text uses a very shallow slope to keep reading stable:
| Text level | Mobile minimum (375px) | Desktop maximum (1440px) | Recommended CSS clamp() expression |
Recommended line height |
|---|---|---|---|---|
| Display / Hero heading | 32px (2.0rem) |
56px (3.5rem) |
clamp(2rem, 1.47rem + 2.25vw, 3.5rem) |
1.15–1.2 |
| H2 / Section heading | 24px (1.5rem) |
36px (2.25rem) |
clamp(1.5rem, 1.24rem + 1.13vw, 2.25rem) |
1.25–1.3 |
| H3 / Card heading | 18px (1.125rem) |
22px (1.375rem) |
clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem) |
1.35–1.4 |
| Body / Paragraph text | 16px (1.0rem) |
18px (1.125rem) |
clamp(1rem, 0.96rem + 0.19vw, 1.125rem) |
1.65–1.75 |
3. Use max-width: 65ch to maintain a comfortable reading width
As type scales up smoothly, allowing the paragraph container to grow indefinitely on large screens can produce lines longer than 90 characters, making it difficult for readers' eyes to track to the next line. Pair body text containers with max-width: 60ch–70ch, or 32–42 Chinese characters per line, so fluid type sizing and a comfortable line length work together.
