CSS Unit Converter (px, em, rem, vw, pt)
Convert CSS lengths between px, em, rem, %, vw, vh, pt, pc, in, cm, mm and Q using your font sizes, viewport and screen DPI.
In pixels
16px
- rem
- 1rem
- em
- 1em
- pt
- 12pt
- vw
- 1.1111vw
- On a 96 DPI screen
- 4.233 mm (0.1667 in)
Assumes a 16px root font, a 16px element font and a 1440 × 900px viewport. CSS absolute units use 1in = 96px; the physical size uses your 96 px per inch.
The same length in every CSS unit
| Unit | Value |
|---|---|
| px | 16 |
| rem | 1 |
| em | 1 |
| % (of font size) | 100 |
| vw | 1.1111 |
| vh | 1.7778 |
| vmin | 1.7778 |
| vmax | 1.1111 |
| pt | 12 |
| pc | 1 |
| in | 0.1667 |
| cm | 0.4233 |
| mm | 4.2333 |
| Q (quarter-mm) | 16.9333 |
Show the work
In rem
rem = px ÷ root font size
16 ÷ 16 = 1rem
In em
em = px ÷ element font size
16 ÷ 16 = 1em
In pt
pt = px ÷ (96 ÷ 72)
16 ÷ (96 ÷ 72) = 12pt
In vw
vw = px ÷ (viewport width ÷ 100)
16 ÷ (1440 ÷ 100) = 1.1111vw
In pixels (the value you entered)
16px
How it works
CSS fixes 1in = 96px = 72pt = 6pc = 2.54cm and 1Q = 0.25mm. 1em (and 100%) = the element's font size; 1rem = the root font size; 1vw/1vh = 1% of the viewport width/height; vmin/vmax use the smaller/larger side.
Absolute units use CSS's anchor (1 in = 96 px, CSS Values and Units Level 4 §6.2), so a CSS inch is not a physical inch on most screens. The 'on your screen' size uses the DPI you enter. % is taken as a percentage of the font size (as for font-size).
Questions
- How does the CSS unit converter work?
- CSS fixes 1in = 96px = 72pt = 6pc = 2.54cm and 1Q = 0.25mm. 1em (and 100%) = the element's font size; 1rem = the root font size; 1vw/1vh = 1% of the viewport width/height; vmin/vmax use the smaller/larger side.
- What does it assume?
- Absolute units use CSS's anchor (1 in = 96 px, CSS Values and Units Level 4 §6.2), so a CSS inch is not a physical inch on most screens. The 'on your screen' size uses the DPI you enter. % is taken as a percentage of the font size (as for font-size).
- How many px is 1rem?
- The root font size — 16 px in every browser by default — so 1rem = 16px = 12pt unless the page changes html { font-size }.
- Why doesn't 1 CSS inch measure an inch on my screen?
- CSS defines 1in as 96 px. Real screens have other pixel densities, so enter your DPI to see the physical size.
Related tools
- Number Base ConverterConvert whole numbers between decimal, binary, hexadecimal and octal — exactly, at any size.
- Text to Binary (UTF-8) ConverterConvert text to its UTF-8 bytes in binary, and binary back to text.
- Color Code ConverterConvert colors between HEX, RGB and HSL with a live preview.
- Data Storage ConverterConvert bytes, kilobytes, megabytes, gigabytes and binary units like MiB and GiB.
- Data Transfer Rate ConverterConvert internet and network speeds — Mbps, Gbps, MB/s, MiB/s and more.
- Typography ConverterConvert CSS and print type sizes — pixels, points, picas, em and rem.
Want this on your site? Embed the css unit converter (px, em, rem, vw, pt).