Responsive Typography
Use clamp() to create fluid font sizes that scale between a minimum and maximum based on viewport width without media queries.
rem units scale with the browser base font size, making text more accessible.
HTML
Intermediate
4 min read
Responsive Typography
Example
/* Fluid font size: min 1rem, max 2.5rem */
h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
}
/* Scale body text with rem */
body {
font-size: clamp(1rem, 1.5vw, 1.125rem);
line-height: 1.6;
} Pro Tip
clamp(min, preferred, max) replaces multiple media query font-size declarations with a single line.