When to Use Each CSS Unit
px works for borders, shadows, and fixed-size icons that must never scale. rem is best for font sizes and spacing — it inherits from the root element, so users who increase their browser font size get larger text automatically. Use em for padding inside components that should scale with their own font size. vw and vh suit full-viewport layouts and hero sections.
The px to rem Formula
rem = px ÷ root font size. With the browser default of 16px: 24px = 1.5rem. Some developers set html { font-size: 62.5%; } to shift the root to 10px, making 1.4rem = 14px for easier mental arithmetic. Avoid this if you use third-party component libraries that assume a 16px root.
Avoiding Common Unit Mistakes
Nested em values multiply: a 0.8em element inside another 0.8em parent renders at 0.64em relative to the root. Use rem to avoid cascade surprises. Never hard-code font-size in px on the html element — it blocks users who rely on browser font scaling for accessibility. vw can produce illegibly small text on narrow phones without a clamp() guard.
Frequently Asked Questions
What is the default root font size?
Most browsers default to 16px. Some users change this in accessibility settings. rem-based layouts adapt gracefully to that change; px-based ones do not.
Should I use em or rem for spacing?
Use rem for global typography and layout spacing so everything scales consistently. Use em only inside self-contained components where margins and padding should scale with that component's own font-size, not the root.
How do I convert pt to px?
1pt = 1.333px (96 ÷ 72). Points originated in print design; 12pt = 16px on screen. For screen CSS, avoid pt unless you are targeting a print stylesheet.