All tools · 🎨 Design
📏 px ↔ rem ↔ em
CSS has too many length units. This tool converts between px, rem, em, %, pt, and viewport units (vw, vh) with a configurable root font size (default 16px). Helpful when migrating an old pixel-based design to a responsive rem-based one.
Examples
1 rem · 16 px · 12 pt · 100% (of 16px parent)1.5 rem · 1.25 vw · 2.22 vhFrequently asked questions
rem vs em — what is the difference?
rem is relative to the root html font-size. em is relative to the parent element's font-size — so em values compound when nested.
Should I use px or rem?
rem for typography and spacing — it scales with the user's browser settings (accessibility). px for borders and exact pixel-precision things.
When are vw/vh useful?
Full-viewport elements (heroes, splash screens), and "fluid typography" patterns like font-size: clamp(1rem, 2vw, 1.5rem).
About this tool
px ↔ rem ↔ em runs entirely in your browser using standard Web APIs. No data is sent to any server. The source for this tool is in our public GitHub repository.
Related tools
- 📺 Aspect Ratio Calculator — Calculate width or height given an aspect ratio (16:9, 4:3, 21:9, custom).
- 🟫 Border Radius Generator — Generate CSS border-radius with per-corner control. Live preview.
- 📏 Unit Converter — Convert length, weight, temperature, area, volume, speed, time, energy.
Why this tool
vs typical free web-tool sites
| 1vw | Typical free site | |
|---|---|---|
| Price | Free | Free |
| Signup required | No | Often (for premium features) |
| Ads inside the tool | No | Yes (banner + video) |
| Data sent to server | No (browser-only) | Yes (inputs analyzed for ads) |
| Total tools | 96 | Often <20 or scattered across sites |
| Bookmarkable URL per tool | Yes | Mixed |
| Loads in under 1s | Yes (static) | Often slow (ad tracking) |
| Multilingual | EN / ES / PT / FR / DE | Usually EN only |
| Open source | Yes | No |