EM to PX & VH to PX Converter
Convert relative CSS units into pixels. Set the parent font size and viewport size to see exactly how em, rem, vh and vw resolve.
How to use the EM to PX & VH to PX Converter
- Enter the value and choose its unit.
- Set the parent/root font size (16px default).
- Set the viewport width and height for vw/vh.
How it works
- em = value × the parent element’s font size
- rem = value × the root (html) font size
- vh / vw = 1% of the viewport height / width
- pt = 4/3 px (1pt = 1/72 in, 1px = 1/96 in)
On mobile, 100vh can include the area behind the browser toolbar; newer units like svh and dvh address this.
em to px at 16px
| em / rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 0.875 | 14 |
| 1 | 16 |
| 1.125 | 18 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
Frequently asked questions
How many px is 1em?
16px if the parent font size is the default 16px.
How many px is 100vh?
The full height of the browser viewport, e.g. 900px on a 900px-tall window.
What is 2rem in px?
32px with a 16px root font size.
Should I use em or rem?
rem is easier to predict; em is useful for spacing that should scale with the component’s own font size.