CSS Unit Converter
Convert between px, rem, em, pt, vw, vh, %, cm, mm, and in
16px = 1rem (base: 16px)
Quick Reference
* Viewport-based values assume default 1920x1080 viewport. Adjust settings above for your target dimensions.
What are CSS Units?
CSS units define the size of elements, spacing, and typography on web pages. Choosing the right unit is critical for building responsive, accessible websites. CSS units fall into two categories: absolute units and relative units.
This tool lets you convert between the most common CSS units instantly. Enter a value, select your source and target units, and see the result in real time. All calculations happen in your browser — nothing is sent to a server.
Absolute vs. Relative Units
Absolute Units
Absolute units have a fixed size regardless of the parent element or viewport. They are best for print stylesheets or precise pixel control.
- px — Pixels, the most common absolute unit
- pt — Points (1pt = 1.333px), used in print
- cm / mm / in — Physical units mapped to CSS pixels
Relative Units
Relative units scale based on another value such as the font size or viewport dimensions. They are essential for responsive design.
- rem — Relative to root font size
- em — Relative to parent font size
- vw / vh — Relative to viewport width / height
- % — Relative to parent element
When to Use Each Unit
| Unit | Best For | Example |
|---|---|---|
| rem | Font sizes, spacing, layout | font-size: 1.25rem |
| px | Borders, shadows, fine details | border: 1px solid |
| vw/vh | Full-screen sections, fluid text | height: 100vh |
| em | Component-scoped scaling | padding: 0.5em 1em |
| % | Widths, fluid layouts | width: 50% |
| pt | Print stylesheets | font-size: 12pt |