Connection failed. Please try again.

Skip to content
SEO Tools
Help and documentation
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

  1. 1Set the base size on <html> (typically 100% = 16px).
  2. 2Specify font sizes in rem (e.g. 1rem, 1.25rem, 0.875rem).
  3. 3Use em where the size should derive from the parent.
  4. 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.

Related topics