px vs. rem vs. em: Which CSS Unit to Use and When

Use rem for almost all sizing, em when something should scale with its own text, and px only when you truly want a fixed value. The difference comes down to what each unit is measured against: px is absolute, rem is relative to the root font size, and em is relative to the parent element's font size.

What each unit references

• px — an absolute CSS pixel. 16px is always 16px, regardless of any font setting.
• rem — relative to the ROOT element's font size. With the default 16px root, 1rem = 16px, 1.5rem = 24px.
• em — relative to the CURRENT element's font size, so its real value depends on where it sits in the tree.

Why rem is the accessible default

When a user raises their browser's default font size — a common accessibility need — rem-based layouts scale with it, while px-based ones ignore the preference and stay fixed. Sizing text, spacing, and most dimensions in rem means your design respects the reader. This is the single biggest reason to prefer rem over px.

The em compounding trap

Because em is relative to the parent's font size, ems multiply when elements nest. If a list sets 0.9em and a nested list sets 0.9em again, the inner text is 0.81em of the grandparent — text that keeps shrinking the deeper it nests. rem sidesteps this entirely by always referring to the root.

Quick conversions (16px root)

• 12px = 0.75rem · 14px = 0.875rem · 16px = 1rem
• 18px = 1.125rem · 20px = 1.25rem · 24px = 1.5rem · 32px = 2rem

The formula is simply px ÷ root font size. At the 16px default, divide by 16. The px to rem converter does this both ways and lets you set a custom root if your project uses one.

The 62.5% shortcut, and its catch

Some teams set the root to 62.5% (making 1rem = 10px) so conversions are trivial — 1.6rem = 16px. It works, but it changes the meaning of rem everywhere and can interact badly with third-party components that assume a 16px root. Know the trade-off before adopting it.

When px is still right

Fixed, decorative details that should not scale — 1px hairline borders, fine box-shadow offsets, and similar — are fine in px. For shadows, the box-shadow generator outputs px offsets directly; for media boxes, the aspect ratio calculator keeps proportions correct regardless of the unit you size with.