px vs rem — CSS Unit Comparison for Responsive Design
Choosing between px (pixels) and rem (root em) for CSS sizing is a foundational decision for web accessibility and responsive design. Pixels are absolute and do not scale with user font size preferences. Rem units scale relative to the root font size, meaning a user who sets their browser font to 20px for accessibility will see all rem-based text and spacing scale proportionally. This distinction has real implications for users with low vision.
Comparison Table
| Aspect | px | rem |
|---|---|---|
| Unit type | Absolute; 1px = 1 device-independent pixel | Relative; 1rem = root element font size (default 16px) |
| User font scaling | Does not scale when user increases browser font size | Scales proportionally with user's font size preference |
| Default size | Exact pixels; no calculation needed | 1rem = 16px by default; 1.5rem = 24px |
| Accessibility | Can break WCAG 1.4.4 (text resize to 200%) if used for text | Accessible by default; scales with user preferences |
| Predictability | Always the exact size regardless of context | Depends on root font size; can be surprising if root changes |
| Media queries | px media queries do not respect user font scaling | rem media queries scale with user font preferences |
When to Use px
Use px for borders (1px border), box shadows, and decorative elements where the physical pixel precision matters and scaling is undesirable. Pixels are also appropriate for layout dimensions that must remain fixed regardless of font size — certain fixed headers, minimum touch target sizes, and image dimensions.
When to Use rem
Use rem for font sizes, padding, margins, and most layout dimensions that should scale with the user's accessibility preferences. The WCAG 2.1 guideline 1.4.4 requires text to be resizable to 200% without loss of functionality — using rem for text sizing respects user browser font size settings and satisfies this requirement by default.
Convert Between px and rem
FAQ
- What is em vs rem?
- Em units are relative to the font size of the parent element. Rem (root em) is always relative to the root <html> element's font size. Em can compound: a 1.2em element inside another 1.2em element is effectively 1.44em. Rem avoids this compounding, making it more predictable.
- Should I set the root font size to 62.5%?
- The 62.5% trick sets the root font to 10px (62.5% of 16px), making rem arithmetic easy: 1.6rem = 16px. It was popular but is now generally discouraged because it overrides the user's browser font preference, breaking accessibility. Use rem directly with the default 16px base.
- Are pixels bad for accessibility?
- Using px for font sizes specifically breaks text resizability for users with low vision who increase their browser default font size. Using px for spacing (padding, margin) is less critical but still suboptimal. The safest approach: use rem for everything typography-related, px only for non-scalable decorative properties.