CSS Unit Converter
Convert between px, rem, em, vw, vh, %, pt, cm, mm, in instantly. Free tool for web developers.
Convert CSS Units
Common Presets
Font Sizes
Spacing
Breakpoints
CSS Unit Quick Reference
| Unit | Name | Relative To | Example |
|---|---|---|---|
| px | Pixels | Screen (absolute) | font-size: 16px |
| rem | Root EM | Root font-size (:root/html) | padding: 1.5rem |
| em | EM | Parent element font-size | margin: 2em |
| vw | Viewport Width | 1% of viewport width | width: 50vw |
| vh | Viewport Height | 1% of viewport height | height: 100vh |
| % | Percentage | Parent element | width: 50% |
| pt | Points | 1/72 of an inch | font-size: 12pt |
| cm | Centimeters | Absolute (physical) | width: 10cm |
| mm | Millimeters | Absolute (physical) | border: 1mm |
| in | Inches | Absolute (physical) | margin: 0.5in |
What Are CSS Units?
CSS units define the size of elements on a web page. They fall into two categories: absolute units (like px, pt, cm) that have fixed sizes, and relative units (like rem, em, vw, vh, %) that scale based on other factors like font size or viewport dimensions.
Understanding CSS units is essential for building responsive, accessible websites. Choosing the right unit for each property affects how your layout adapts to different screen sizes and user preferences.
Absolute vs. Relative Units
Absolute units map to physical measurements. A pixel (px) is the most common absolute unit on screen. Points (pt), centimeters (cm), millimeters (mm), and inches (in) are primarily used for print stylesheets.
Relative units scale in proportion to something else. This makes them ideal for responsive design:
remscales relative to the root element's font size (usually 16px)emscales relative to the parent element's font sizevw/vhscale relative to the viewport dimensions%scales relative to the parent element's size
When to Use px vs rem vs em
Use rem for:
- Font sizes — respects user browser settings for accessibility
- Spacing (margin/padding) — scales proportionally with root font size
- Media queries — rem-based breakpoints adapt to user preferences
- Max-width containers — keeps content readable at any zoom level
Use em for:
- Component-level spacing — padding that should scale with the component's own font size
- Icon sizing — icons that should match adjacent text size
- Button padding — internal spacing that grows with button text size
Use px for:
- Borders — 1px borders should stay 1px regardless of font size
- Box shadows — decorative effects that don't need to scale
- Fine details — when you need exact, pixel-perfect control
html { font-size: 100%; } /* 16px default */
body { font-size: 1rem; line-height: 1.6; }
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
.container { max-width: 60rem; } /* 960px */
.card { padding: 1.5rem; border: 1px solid #ccc; }
Responsive Design Best Practices with CSS Units
Choosing the right CSS unit is crucial for responsive layouts. Here are proven strategies used by professional web developers:
1. Use rem as Your Base Unit
Set your root font size to 100% (not a fixed px value) and use rem throughout. This ensures your entire layout respects the user's preferred font size and scales consistently.
2. Viewport Units for Full-Screen Layouts
Use vw and vh for hero sections, full-screen modals, and viewport-dependent sizing. Combine with min() and max() to prevent extreme sizes:
.title { font-size: clamp(1.5rem, 4vw, 3rem); }
.sidebar { width: min(300px, 30vw); }
3. Use clamp() for Fluid Typography
The clamp() function combines min, preferred, and max values. It's perfect for font sizes that should scale with the viewport but within reasonable bounds.
p { font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem); }
4. Avoid Mixing Units Unnecessarily
Pick a primary unit system and stick with it. Mixing px, rem, and em inconsistently makes maintenance harder. A common approach is rem for sizing and spacing, px for borders and shadows.
CSS Unit Cheat Sheet
1rem = ?px
16px (default). Changes if you set a different font-size on the html element.
1em = ?px
Depends on parent. If parent is 16px, then 1em = 16px. Nesting compounds the value.
1vw = ?px
1% of viewport width. At 1920px width: 1vw = 19.2px.
1vh = ?px
1% of viewport height. At 1080px height: 1vh = 10.8px.
1pt = ?px
1.333px (at 96 DPI). Points are commonly used in print CSS.
1in = ?px
96px (at standard screen DPI). 1 inch = 2.54cm = 25.4mm.
1cm = ?px
37.795px (at 96 DPI). Rarely used on screen, common in print.
100% = ?
Depends on property. For width: parent's width. For font-size: parent's font-size.
Frequently Asked Questions
To convert px to rem, divide the pixel value by the root font size (usually 16px). For example, 24px / 16 = 1.5rem. Use our converter above for instant results with any base font size.
rem is relative to the root element's font size (html element, usually 16px). em is relative to the parent element's font size. rem is more predictable because it always refers to the root, while em can compound when nested. For example, a 2em inside another 2em element would result in 4x the root font size.
1vw equals 1% of the viewport width. On a 1920px wide screen, 1vw = 19.2px. On a 1440px screen, 1vw = 14.4px. The pixel value changes based on the user's screen size.
Use rem for font sizes in most cases. rem respects user browser settings for accessibility, scales proportionally, and makes responsive design easier. Use px only when you need exact pixel-perfect sizing that should never change.
To convert px to vw, use the formula: vw = (px / viewport width) x 100. For example, on a 1440px design: 720px / 1440 x 100 = 50vw. Our converter lets you set any viewport width for accurate results.
The default browser font size is 16px in all major browsers (Chrome, Firefox, Safari, Edge). This means 1rem = 16px by default. Users can change this in their browser settings for accessibility.