CSS Unit Converter
—
Quick Reference (at 96 DPI, 16px base)
| Unit | Equals | Description |
|---|---|---|
| 1px | 1 pixel | Absolute, screen pixel |
| 1em | 16px (default) | Relative to parent font size |
| 1rem | 16px (default) | Relative to root font size |
| 1pt | 1.333px | Typographic point (1/72 in) |
| 1cm | 37.795px | Centimeters (print) |
| 1in | 96px | Inches (96px standard) |
| 1vw | 1% viewport width | Responsive unit |
When to Use Each Unit
px: Fixed sizes, borders, small details. Pixel-perfect control.
rem: Font sizes, spacing. Consistent across the page (based on root font size).
em: Component-relative sizing. Good for padding/margins within a component.
vw/vh: Full-screen layouts, hero sections, responsive typography.
pt/cm/in: Print stylesheets (@media print). 1pt = 1/72 inch.