CSS Unit Converter
Convert between px, rem, em, vw, vh, pt, and cm. Set base font size and viewport for accurate results. Includes Tailwind spacing and breakpoint reference.
All Units
pxpx — Pixels
16remrem — Root em
1emem — Em
1vwvw — Viewport width
1.11111vhvh — Viewport height
1.77778ptpt — Points
12cmcm — Centimetres
0.42333Quick Reference — Tailwind Spacing
Responsive Breakpoints (Tailwind)
sm640404044.444471.111148016.9333md768484853.333385.333357620.32lg1024646471.1111113.77876827.0933xl1280808088.8889142.22296033.86672xl15369696106.667170.667115240.64Click a breakpoint row to load it in the converter. rem/em based on 16px base. vw/vh based on 1440×900px viewport.
Frequently Asked Questions
What is the difference between rem and em?
Both rem and em are relative units. rem (root em) is always relative to the root element's font size (typically 16px on most browsers). em is relative to the font size of the element itself, which means it can compound when nested. For most layout and spacing purposes, rem is preferred because it is predictable.
What base font size should I use?
The default browser base font size is 16px, and most design systems (including Tailwind CSS) use this as a baseline. If your project uses a custom root font-size via CSS (e.g., html { font-size: 62.5% } to make 1rem = 10px), adjust the base font size setting accordingly to get accurate conversions.
When should I use vw/vh units?
Use vw (viewport width) and vh (viewport height) when you want an element to scale proportionally with the browser window. They are great for full-screen layouts, hero sections, and fluid typography. Be cautious with vh on mobile browsers, where the address bar can affect the available viewport height.
Why do designers still use px?
Pixels are the most intuitive unit — design tools like Figma work in pixels, and browser devtools report computed sizes in pixels. px is also reliable for borders, shadows, and fine details that should not scale with font size. For layout and typography, rem is generally preferred, but px remains valid for specific use cases.
What is the difference between pt and px?
Points (pt) are a print-oriented unit: 1pt = 1/72 inch. On screens at 96 DPI, 1pt equals 96/72 ≈ 1.333px. Points are common in CSS for print stylesheets and in design tools set to print mode. For web design, pixels and rem are far more common.