UX / UI Low impact Medium 30–60 min

Relative font units (rem/em vs px)

Prefer rem/em over fixed px for font sizes.

What it is

Font size can be specified fixed in px, or relatively in rem/em. Rem is based on the document's base size, so it responds to the user's browser font-size setting.

Why it matters

Fixed px ignore it when a user increases the default font size in the browser (common among people with weaker vision). Rem/em respect this setting: they are more accessible and easier to scale consistently.

How to do it

1Set the base size on <html> (typically 100% = 16px).
2Specify font sizes in rem (e.g. 1rem, 1.25rem, 0.875rem).
3Use em where the size should derive from the parent.
4Leave fixed px only for details where scaling doesn't make sense (e.g. 1px lines).

Example

Wrong

h1 { font-size: 32px; }
p  { font-size: 14px; }

Correct

html { font-size: 100%; }
h1 { font-size: 2rem; }
p  { font-size: 0.95rem; }

Conclusion

Relative units are more accessible and maintainable. It's not a disaster like blocked zoom, but on a new site it pays to do it right from the start with rem. It respects users who increase their font size.