Responsive Typography with REM and CSS clamp()
Build a fluid font-size scale with rem and clamp while preserving readable limits and testing text resizing.
Responsive typography needs both a readable minimum and a sensible maximum. CSS clamp() can interpolate between those limits as the viewport changes. Use rem for the bounds so the scale relates to the root font size, then verify that the viewport-dependent middle term behaves correctly when users enlarge text.
Start with useful minimum and maximum sizes
Choose bounds based on content, not just a desktop mockup. A heading might start at 1.5rem and stop at 3rem, while body text stays at least 1rem in the chosen design. These values are starting points rather than universal requirements. Long translated headings, narrow devices, and embedded widgets may need different limits.
Mix relative text sizing and viewport growth
A preferred expression such as calc(1rem + 2vw) grows with the viewport while keeping a root-relative contribution. Pure viewport sizing can respond poorly to text preferences. Even a mixed expression is not proof of accessibility: check browser zoom, text-only enlargement where available, and mobile orientation. Do not place fluid headings in a rigid-height wrapper that cuts off extra lines.
Use a shared scale and test real content
Define custom properties for body, subheading, and display sizes so components use the same decisions. Check line height without units, line length, and spacing alongside font size. A number that looks good on a short heading can become awkward on a four-line title. Use the PX to REM tool to translate an existing design, then adjust the scale based on reading and resizing tests rather than matching a screenshot exactly.
Worked example
:root { --title-size: clamp(1.5rem, calc(1rem + 2vw), 3rem); }
h1 { font-size: var(--title-size); line-height: 1.15; }Does clamp() guarantee accessible text scaling?
No. Test the complete layout under zoom and text resizing, because viewport terms and rigid containers can limit the result.
Reference and further reading
KEEP EXPLORING
Another useful idea.
PX vs REM in CSS: Conversion and Practical Differences
Learn the px-to-rem formula, root font-size behavior, browser defaults, and common conversion mistakes.
WCAG Color Contrast: AA and AAA Ratios Explained
Understand text contrast thresholds, relative luminance, large text rules, and how to test foreground/background pairs.
How to Build an Accessible UI Color Palette
Choose and test semantic color pairs for buttons, labels, focus indicators, and dark mode interfaces.