Fluid Type

Your type scale looks right at 1440px. On a phone the headline is the same size as the desktop mock. You added a breakpoint. Then another. Then one per heading.

The Principle

Fluid typographyTypography that scales continuously between viewport widths instead of jumping at breakpoints, usually with clamp(). lets font sizes scale between a minimum and maximum across viewport widths. clamp()A CSS function that clamps a value between a minimum, preferred, and maximum. Ideal for responsive type. sets all three in one declaration.

The Rule I Follow

I use fluid type for display text and headings. Body text stays in a fixed, readable range. Headlines scale with the viewport. Paragraphs don't.

Try It Yourself

Drag the viewport slider and watch the headline scale with clamp(). Body copy stays at 1rem.

The headline grows and shrinks with the viewport. Body copy stays put.

The Mistake I'd Avoid

Making body text fluid without limits. Bigger screens don't automatically need bigger paragraphs.

Remember This

Typography should adapt with the screen, not fight against it.

h1 {
/* min, preferred (scales with viewport), max */
font-size: clamp(2rem, 1.5rem + 2.5vw, 3.16rem);
}

p {
font-size: 1rem; /* keep body copy in a fixed, readable range */
}

h1 {
/* min, preferred (scales with viewport), max */
font-size: clamp(2rem, 1.5rem + 2.5vw, 3.16rem);
}

p {
font-size: 1rem; /* keep body copy in a fixed, readable range */
}