responsive/no-viewport-font-size

Why

Viewport units follow the window, not the zoom level or the browser's text size. Text set to 5vw stays the same size when someone zooms in, so it may never reach the 200% that low-vision readers need.

Fix

Mix a rem part into the formula and bound it with rem: font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem). Keep the maximum no more than about 2.5 times the minimum so zoom can still double the text. Check at 200% zoom.

Examples

/* bad */
.hero__title { font-size: 6vw; }
/* good */
.hero__title { font-size: clamp(2rem, 1.2rem + 4vw, 4rem); }

Sources

• WCAG 2.2, Failure F94 (incorrect use of viewport units to resize text)
• WCAG 2.2, Understanding SC 1.4.4 Resize Text
• web.dev, Baseline in action, fluid type

Read it in the terminal

npx github:dawidolko/frontend-skills explain responsive/no-viewport-font-size