Build a bounded fluid type rule with clamp and test it against wrapping and zoom risks.
A hero heading jumps from 32px to 56px at a tablet breakpoint, causing awkward wraps and layout shift. Use clamp(min, preferred, max) to create smooth scaling inside readable bounds. The common trap is replacing breakpoint jumps with pure viewport units. font-size: 6vw scales, but it can become too small on narrow screens and too large on wide ones. Before h1 { font-size: 56px; } @media (max-width: 768px) { h1 { font-size: 32px; } } creates a visible jump and does not address in-between wrapping. After h1 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.5rem); } keeps the heading between usable bounds…
Sign up free — one personalized lesson every day, matched to your role and goals.
Already have an account? Sign in