A Tempting Shortcut That Breaks Something Important
It's tempting to write a fluid font size as a pure viewport-width value — something like font-size: 4vw — since it's shorter and simpler than combining units. This shortcut has a real accessibility cost that isn't obvious at a glance.
Why Pure vw Ignores Browser Zoom
vw is calculated purely from the viewport's physical width in pixels — it has no awareness of the user's browser zoom level or font-size preferences. When someone zooms in to read more comfortably, the viewport's physical pixel width doesn't change; only how content is rendered within it changes. A font size defined purely in vw stays locked to the original size, refusing to grow even as the user actively tries to make text larger.
Why rem Fixes This
rem is relative to the root element's font size — which defaults to 16px, but responds to both the user's browser zoom level and any custom font-size preference they've set. Combining a rem base with a vw scaling component means the text still respects the user's accessibility settings, while also scaling fluidly with viewport width.
The WCAG Connection
WCAG's Success Criterion 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality. A pure-vw font size can genuinely fail this criterion, since it doesn't respond to the resize mechanism at all. A properly constructed rem + vw clamp value does respond, since the rem portion scales with the resize.
A Related Point: Bounding the Values Themselves
It's also worth keeping the minimum and maximum bounds themselves defined in rem, not px — this ensures even the floor and ceiling of your fluid range respect the user's base font-size preference, rather than being fixed absolute values regardless of what they've configured.
Ready to generate accessible, rem-based fluid typography?
Open Clamp Generator