rem vs px

In CSS, px is an absolute-looking unit (one CSS pixel), while rem means "root em": a multiple of the font size set on the root <html> element. Browsers default that size to 16 pixels, so 1rem is normally 16px.

Why it matters

Many people raise their browser's default font size for readability. Sizes written in rem grow with that setting, while text sized in px ignores it. Using rem for font sizes, spacing and breakpoints makes layouts adapt to user preferences, an accessibility recommendation. Pixels remain sensible for things that should not scale, such as hairline borders and shadows. A related unit, em, is relative to the current element's font size, which can compound when nested.

Example

html { font-size: 100%; }          /* keep the user's setting */
body { font-size: 1rem; }          /* 16px by default */
h2   { font-size: 1.5rem; margin-bottom: 1rem; }
.card { border: 1px solid #ddd; }  /* stays a 1px line */

If a visitor sets their browser default to 20px, h2 becomes 30px automatically.

Common mistakes

• Setting html { font-size: 62.5% } for easy math, which can break user preferences and third-party components.
• Using px for all text.
• Mixing em nesting without noticing compounding sizes.

Related

• Viewport units
• CSS
• WCAG
• Responsive design

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.