Big headings on desktop shrink gracefully on phones.
Direct answer
Use the CSS clamp(min, preferred, max) function to set a font size that scales with the screen but never goes below a minimum or above a maximum. Combine rem and vw so users' font preferences still count.
Example
h1 {
font-size: clamp(2rem, 1.2rem + 4vw, 4rem);
}
p {
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}
How it works
- Below the minimum width, the size stays at
2rem. - In between, it grows with the viewport.
- Past the maximum, it stops at
4rem.
Tips
- Add a
rempart to the preferred value so zoom and user settings still work. - Test at several widths.
- Keep line length around 60 to 75 characters with
max-width: 65ch.
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Fluid type removes many font-size media queries.
