Input
Settings
All Conversions
Quick Reference
CSS units — absolute vs relative, and when to use each
- px (pixels) — absolute, fixed. Use for: image sizes, borders, icons with precise hit-targets. Avoid for: typography (user font-size preferences are ignored).
- em — relative to parent font size. Good for: padding/margin that should scale with nearby text. Bad for: deep nesting (compounds —
1eminside1eminside1em= 1.728× root). - rem — relative to root font size (default 16px). Good for: predictable sizing across components. Best default for typography and spacing in modern CSS.
- % (percent) — relative to parent for width/height, to font-size for line-height. Good for: fluid layouts.
- vw / vh — 1% of viewport width/height. Good for: full-screen hero sections. Watch out: mobile browsers' address bar toggling changes
vh. - svh / lvh / dvh (2022+) — small/large/dynamic viewport height.
dvhrespects address bar changes on mobile. Use100dvhfor proper mobile full-screen. - ch — width of the "0" character in current font. Good for: max-width on reading columns (
max-width: 65ch= ideal line length). - ex — height of lowercase "x". Rarely used.
- pt — 1/72 of an inch. Print-only. Avoid in screen CSS.
Frequently Asked Questions
How do I convert px to rem in CSS?
Enter pixels, get rem based on root font size (default 16px). `16px` = `1rem`, `24px` = `1.5rem`. Responsive design best practice: size typography in rem so user font-size settings are respected. Our converter shows all units simultaneously.
What's the difference between em, rem, px, and vw/vh?
`px` = absolute. `em` = relative to parent font-size (cascades, can compound). `rem` = relative to root font-size (predictable). `vw`/`vh` = percentage of viewport width/height. For typography use rem; for layout spacing use rem or %. Avoid px for font sizes in modern CSS.
How do I convert px to vh or vw?
`100vh` = full viewport height. `1vh` = 1% of viewport height. On a 1080px tall screen, `16px` ≈ `1.48vh`. Our converter calculates based on your current viewport, so numbers match what you'd see in the browser.
Should I use rem or em for padding and margin?
Use rem for spacing that should stay consistent across components (predictable). Use em when you want padding to scale with the element's own font size (component-scoped). Most design systems default to rem — simpler mental model.
Is this px-to-rem converter exact?
Yes — uses IEEE 754 double-precision to 4 decimals. Real browsers round rem to ~4 decimal places internally too, so the output matches computed styles exactly.
Smarter quality checks. Faster deployments.
Better apps.
