CSS Unit Converter
Convert between px, rem, em, %, pt, vw, and vh with a customizable base font size.
Processed on your device — never uploaded
Pixels (px)
16px
Root Em (rem)
1rem
Em (em)
1em
Points (pt)
12pt
Percent (%)
100%
Viewport Width (vw)
0.8333vw
Viewport Height (vh)
1.4815vh
| px | rem | em | pt | % |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 6pt | 50% |
| 10px | 0.625rem | 0.625em | 7.5pt | 62.5% |
| 12px | 0.75rem | 0.75em | 9pt | 75% |
| 14px | 0.875rem | 0.875em | 10.5pt | 87.5% |
| 16px | 1rem | 1em | 12pt | 100% |
| 18px | 1.125rem | 1.125em | 13.5pt | 112.5% |
| 20px | 1.25rem | 1.25em | 15pt | 125% |
| 24px | 1.5rem | 1.5em | 18pt | 150% |
| 28px | 1.75rem | 1.75em | 21pt | 175% |
| 32px | 2rem | 2em | 24pt | 200% |
| 36px | 2.25rem | 2.25em | 27pt | 225% |
| 40px | 2.5rem | 2.5em | 30pt | 250% |
| 48px | 3rem | 3em | 36pt | 300% |
| 56px | 3.5rem | 3.5em | 42pt | 350% |
| 64px | 4rem | 4em | 48pt | 400% |
| 72px | 4.5rem | 4.5em | 54pt | 450% |
| 80px | 5rem | 5em | 60pt | 500% |
| 96px | 6rem | 6em | 72pt | 600% |
Frequently Asked Questions
What is the difference between px and rem in CSS?
px is an absolute unit fixed at 1/96th of an inch, while rem is relative to the root element's font size (typically 16px by default), making rem better for responsive designs.
How do I convert px to rem?
Divide the pixel value by the root font size. With the default 16px base, 24px equals 1.5rem (24 / 16 = 1.5).
What is the difference between em and rem?
em is relative to the font size of its parent element and can compound, while rem is always relative to the root element font size, making rem more predictable.
When should I use vw and vh units?
Use vw (viewport width) and vh (viewport height) for elements that should scale with the browser window size, such as full-screen hero sections or responsive typography.