CSS Unit Converter
Convert between px, rem, em, %, vw, vh and ch units instantly.
Convert units
Enter a value and pick its unit.
% uses the parent font size. ch is approximate (0.5em).
Settings
Set the base values your project uses.
Used for rem (default 16px)
Used for em and %
Sets the viewport width
Used for vw
Used for vh
Common conversions
| PX | REM | EM | VW | VH |
|---|---|---|---|---|
| 1px | 0.0625rem | 0.0625em | 0.0694vw | 0.1111vh |
| 2px | 0.125rem | 0.125em | 0.1389vw | 0.2222vh |
| 4px | 0.25rem | 0.25em | 0.2778vw | 0.4444vh |
| 8px | 0.5rem | 0.5em | 0.5556vw | 0.8889vh |
| 10px | 0.625rem | 0.625em | 0.6944vw | 1.1111vh |
| 12px | 0.75rem | 0.75em | 0.8333vw | 1.3333vh |
| 14px | 0.875rem | 0.875em | 0.9722vw | 1.5556vh |
| 16px | 1rem | 1em | 1.1111vw | 1.7778vh |
| 20px | 1.25rem | 1.25em | 1.3889vw | 2.2222vh |
| 24px | 1.5rem | 1.5em | 1.6667vw | 2.6667vh |
| 32px | 2rem | 2em | 2.2222vw | 3.5556vh |
| 40px | 2.5rem | 2.5em | 2.7778vw | 4.4444vh |
| 48px | 3rem | 3em | 3.3333vw | 5.3333vh |
| 56px | 3.5rem | 3.5em | 3.8889vw | 6.2222vh |
| 64px | 4rem | 4em | 4.4444vw | 7.1111vh |
| 80px | 5rem | 5em | 5.5556vw | 8.8889vh |
| 96px | 6rem | 6em | 6.6667vw | 10.6667vh |
| 128px | 8rem | 8em | 8.8889vw | 14.2222vh |
| 160px | 10rem | 10em | 11.1111vw | 17.7778vh |
| 192px | 12rem | 12em | 13.3333vw | 21.3333vh |
Unit reference and formulas
Every value converts through pixels: divide by a unit's base to get there, multiply to come back. With the default 16px root, 24px is 1.5rem and 1.5rem is 24px.
- px
- Absolute pixels, the base every other unit converts through
px = rem × root font size - rem
- Relative to the root font size
rem = px ÷ root font size - em
- Relative to the parent font size
em = px ÷ parent font size - %
- Percentage of the parent font size
% = px ÷ parent font size × 100 - vw
- 1% of the viewport width
vw = px ÷ viewport width × 100 - vh
- 1% of the viewport height
vh = px ÷ viewport height × 100 - ch
- Width of the 0 character, about 0.5em
ch ≈ px ÷ (parent font size × 0.5) - svw lvw dvw
- Small, large and dynamic viewport width; convert like vw
- svh lvh dvh
- Small, large and dynamic viewport height; convert like vh
FAQ
Divide the pixel value by the root font size. With the default root of 16px, 24px is 1.5rem. Change the root font size above if your project sets the html element to something else.
rem is relative to the root font size set on the html element, so it stays consistent everywhere. em is relative to the parent element's font size, so nested elements can compound. Set the parent font size above to see em and % values for your context.
Webflow's Designer offers px, em, rem, ch, vw, vh and %, plus the small, large and dynamic viewport units svw, lvw, dvw, svh, lvh and dvh. This tool converts the seven main units; the sv, lv and dv variants convert like vw and vh against the viewport size you set.
One ch is the width of the 0 glyph in the current font. Without your actual font, this tool assumes 0.5em, the usual fallback width, so ch values are an estimate. Check them against your real typeface.