a11y/font-size-relative

Why

A pixel size on html overrides the default text size a reader chose in the browser settings. Page zoom still works, so this is not a WCAG failure on its own, but people who only raise the default size get no larger text.

Fix

Leave the root size alone, or set it as a percentage (100%), and size type in rem. If the design system needs 10px maths, use 62.5% on the root and keep every other size in rem.

Examples

/* bad */
html { font-size: 16px; }
/* good */
html { font-size: 100%; }
h1 { font-size: 2.5rem; }

Sources

• WCAG 2.2 Technique C28, specifying the size of text containers using em units
• MDN, font-size (accessibility concerns)

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/font-size-relative