css/rem-units

Why

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.

Fix

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.

Examples

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

Sources

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

Read it in the terminal

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