Make Responsive Typography with clamp() and Relative Units

A practical approach

Step 1

Set body text in rem and leave the root font size at the browser default so user preferences apply.

Step 2

Define a small type scale for headings with clamp(), choosing minimum and maximum sizes for small and large screens.

Step 3

Include a rem term in the preferred value, not only vw, so text still responds to browser zoom.

Step 4

Limit line length for readability, around 60 to 75 characters, with max-width in ch units.

Step 5

Check the result at 200% zoom and on a narrow phone width to make sure nothing overflows.

Worked example

A course landing page sets its main heading to 64px, which wraps word by word on phones and requires two media queries to fix. Replacing it with font-size: clamp(2rem, 1.2rem + 4vw, 4rem) produces a heading that fits comfortably from small phones to wide screens, and the media queries are removed.

A mistake to avoid

Do not use viewport units alone for font sizes, such as font-size: 5vw. Text sized only by viewport width does not grow when users zoom in, which can fail accessibility requirements for resizing text.

Try it yourself

Replace the font sizes for one page's headings with a clamp()-based scale. Test it on three widths and at 200% browser zoom, and adjust the limits until all headings fit without overflow.

Your implementation checklist

• Body text uses rem and respects user settings
• Headings use clamp() with sensible limits
• Preferred values include a rem term
• Line length is limited for reading
• Typography is tested at narrow widths and 200% zoom