PX vs REM vs EM: When to Use Each CSS Unit
Learn the differences between px, rem, and em in CSS. Understand when to use each unit for fonts, spacing, and responsive layouts. Includes practical examples and accessibility best practices.
Try our free CSS Unit Converter
Convert between px, rem, em, vh, and vw. Set custom root font size and see visual previews.
Understanding CSS Units
CSS provides multiple units for sizing elements, and choosing the right one affects accessibility, responsiveness, and maintainability. The three most commonly used units for typography and spacing are px (pixels), rem (root em), and em.
Each unit has a different reference point: px is absolute (always the same size), rem is relative to the root element's font size, and em is relative to the parent element's font size. This seemingly small difference has major implications for how your layouts respond to user preferences and device settings.
The modern consensus is clear: use rem for most things, em for component-internal spacing, and px only for fixed decorative details. This guide explains why, with practical examples you can apply immediately. Use our CSS Unit Converter to quickly convert between units as you follow along.
PX: The Absolute Unit
A pixel (px) in CSS is not a physical device pixel — it is a "reference pixel" that is approximately 1/96th of an inch at a typical viewing distance. On high-DPI screens (Retina), one CSS pixel may correspond to 2 or 3 physical pixels. The browser handles this mapping transparently.
The key property of px is that it does not change based on any other setting. font-size: 16pxis always 16px regardless of the user's browser settings, parent element sizes, or root font size. This makes px predictable but inflexible.
When PX Is Appropriate
- Borders —
border: 1px solidshould stay 1px regardless of font size. - Box shadows — Shadow offsets and blur radius are decorative and do not need to scale.
- Fine details — Dividers, outlines, and hairline separators.
- Media queries — Breakpoints in px relate to viewport size, not font size (though rem breakpoints work too).
When PX Is Harmful
/* BAD: Font size in px ignores user preferences */
body {
font-size: 16px; /* Users who set larger fonts won't see a change */
}
/* GOOD: Let the browser default flow through */
body {
font-size: 1rem; /* Respects the user's chosen base size */
}REM: Relative to Root
REM stands for "root em." It is always relative to the root element's (<html>) computed font size. By default, browsers set the root to 16px, so 1rem = 16px, 1.5rem = 24px, and 0.875rem = 14px.
The crucial advantage: when a user changes their browser's default font size (e.g., from 16px to 20px for better readability), every rem-based value scales proportionally. Font sizes, spacing, container widths — everything adjusts together, maintaining your design's proportions while respecting the user's preference.
Common REM Values (at 16px root)
| REM | Pixels | Common Use |
|---|---|---|
| 0.75rem | 12px | Small/caption text |
| 0.875rem | 14px | Secondary text |
| 1rem | 16px | Body text |
| 1.25rem | 20px | H4 headings |
| 1.5rem | 24px | H3 headings, spacing |
| 2rem | 32px | H2 headings |
| 3rem | 48px | H1 headings |
Need to quickly convert between px and rem? Our CSS Unit Converter lets you set a custom root font size and see instant conversions with a visual size preview.
EM: Relative to Parent
The em unit is relative to the computed font size of the element itself (for properties like padding and margin) or the parent element's font size (for the font-size property). This creates a compounding effect that can be both powerful and confusing.
/* EM compounding — the classic gotcha */
.parent {
font-size: 1.2em; /* 16px × 1.2 = 19.2px */
}
.parent .child {
font-size: 1.2em; /* 19.2px × 1.2 = 23.04px (NOT 19.2px!) */
}
.parent .child .grandchild {
font-size: 1.2em; /* 23.04px × 1.2 = 27.65px — keeps growing! */
}This compounding is why rem largely replaced em for font sizes. However, em is still valuable for component-relative spacing:
/* PERFECT use of em: button padding scales with font size */
.btn {
padding: 0.5em 1em; /* Padding is relative to the button's font size */
border-radius: 0.25em;
}
.btn-sm { font-size: 0.875rem; } /* Small button — padding shrinks */
.btn-md { font-size: 1rem; } /* Medium — default */
.btn-lg { font-size: 1.25rem; } /* Large — padding grows */
/* You get 3 proportionally-sized buttons with ONE padding declaration */This pattern works because em-based padding on a button is proportional to the button's own font size. Change the font size, and the padding scales automatically — no need for separate padding values per size variant.
When to Use Each Unit
| Property | Recommended Unit | Why |
|---|---|---|
| font-size | rem | Respects user preferences, no compounding |
| margin / padding (layout) | rem | Consistent spacing across components |
| padding (component) | em | Scales with the component's own font size |
| line-height | unitless (1.5) | Inherits correctly, avoids cascading issues |
| border-width | px | Decorative detail, should not scale |
| box-shadow | px | Visual effect, does not need to respect font prefs |
| max-width (containers) | rem or ch | Content width scales with readability prefs |
| media queries | em | em in media queries respects browser zoom |
This table reflects the approach used by major design systems (Tailwind CSS, Material UI, Radix). The key insight: use rem as your default, em for component-local proportionality, and px only for things that should remain pixel-precise. You can experiment with conversions using our CSS Unit Converter and see how values change across different root sizes.
Accessibility and Responsive Design
WCAG 2.2 Success Criterion 1.4.4 (Resize Text)requires that text can be resized up to 200% without loss of content or functionality. Using rem-based sizing makes this automatic — when users increase their browser's base font size, everything scales proportionally.
If you use px for font sizes, users who have set their browser default to 20px (a common accessibility setting) will see no change on your site. This is a real accessibility barrier for people with low vision. Approximately 7% of users have changed their default font size — that is millions of people.
/* Accessible approach: everything in rem */
:root {
/* Don't set font-size on html — let the browser default flow */
}
h1 { font-size: 2.5rem; } /* 40px at default, 50px if user sets 20px */
h2 { font-size: 2rem; } /* 32px at default */
p { font-size: 1rem; } /* 16px at default */
.container {
max-width: 65ch; /* Width in ch adjusts to font size too */
padding: 2rem; /* Spacing scales proportionally */
}
/* Decorative elements stay fixed */
.card {
border: 1px solid #e5e5e5;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}When working with colors for those accessible designs, our Color Converter includes a WCAG contrast ratio checker to ensure your text remains readable at any size.
Frequently Asked Questions
Should I use px or rem for font-size?
What is the default root font size in browsers?
When should I use em instead of rem?
Is it okay to use px for borders and shadows?
Convert CSS Units Instantly
Convert between px, rem, em, vh, and vw. Set your root font size and see visual previews of actual rendered sizes.
Open CSS Unit Converter