responsive/no-viewport-font-size

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

• 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

Przeczytaj w terminalu

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