CSS Units Converter

Reference

CSS Units

CSS offers both absolute and relative units. Absolute units like px are fixed regardless of context. Relative units like rem, em, and vw scale based on a reference — making them essential for responsive, accessible layouts.

px, rem, em, vw

px (pixels) — an absolute unit. 1px is one device-independent pixel. Use for borders, shadows, and elements that should not scale with font size.

rem (root em) — relative to the root (html) element's font size. Default browser root size is 16px. Preferred for font sizes and spacing because it respects the user's browser font size setting.

em — relative to the parent element's font size. Can compound in nested elements. Useful for padding and margins that should scale with the element's own font size.

vw (viewport width) — 1vw = 1% of the viewport width. Great for fluid typography and full-width layouts that adapt to screen size.

Common px to rem conversions

With the default browser base of 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. For viewport units on a 1440px design: 14.4px = 1vw, 72px = 5vw.

Why rem is preferred for accessibility

Using rem for font sizes respects the user's browser font-size preference. When a user sets their browser to 20px instead of the default 16px, rem-based layouts scale proportionally while px-based layouts stay fixed. WCAG 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality — rem units satisfy this requirement naturally.

Privacy

All conversion runs 100% in your browser. No data is sent to a server.