css/rem-units

Dlaczego

A px font size ignores the text size the person set in their browser, so text that is comfortable for the designer stays small for someone who needs it larger. Browser zoom still works, but the text-size setting is how many people with low vision read every site.

Poprawka

Write font sizes in rem (or em inside a component that should follow its parent): 16px is 1rem at the default size. Fluid sizes keep rem bounds: clamp(1rem, 0.9rem + 0.5vw, 1.25rem). When the profile records a px-to-rem function (helper rem-function, for example Foundation's rem-calc()), this rule steps aside and css/rem-helper asks for that function instead; with a build step that converts px (px-to-rem-build) px in the source is the convention.

Przykłady

/* bad */
.card__title { font-size: 20px; }
/* good */
.card__title { font-size: 1.25rem; }

Źródła

• MDN, CSS values and units (relative length units)
• WCAG 2.2, Understanding SC 1.4.4 Resize Text

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain css/rem-units