CSS Unit Converter

Type a value in any field. All other units update instantly.

Root font-size

Viewport width

Viewport height

Parent font-size

px Pixels

rem Root em

em Relative to parent

pt Points (1pt = 1.333px)

% Percentage of parent

vw Viewport width %

vh Viewport height %

Live preview

16px

Quick Reference

Common conversions at 16px root font-size and 1920px viewport width.

px	rem	em	pt	%	vw
1	0.0625	0.0625	0.75	6.25	0.052
2	0.125	0.125	1.5	12.5	0.104
4	0.25	0.25	3	25	0.208
8	0.5	0.5	6	50	0.417
10	0.625	0.625	7.5	62.5	0.521
12	0.75	0.75	9	75	0.625
14	0.875	0.875	10.5	87.5	0.729
16	1	1	12	100	0.833
18	1.125	1.125	13.5	112.5	0.938
20	1.25	1.25	15	125	1.042
24	1.5	1.5	18	150	1.25
32	2	2	24	200	1.667
40	2.5	2.5	30	250	2.083
48	3	3	36	300	2.5
64	4	4	48	400	3.333
96	6	6	72	600	5

CSS Units Explained

px Absolute

Pixels are the most straightforward CSS unit. 1px equals one device pixel on a standard display. Use px for borders, shadows, and fixed-size elements where precision matters.

rem Relative

Rem is relative to the root element's font-size (usually 16px by default). It's the preferred unit for typography and spacing because it scales uniformly when users change their browser font settings.

em Relative

Em is relative to the parent element's font-size. Useful for component-level scaling where children should grow proportionally to the parent. Be careful with nesting since em compounds.

pt Absolute

Points come from print typography: 1pt = 1/72 of an inch = 1.333px. Rarely used in web CSS, but essential when matching web layouts to print designs or PDF specifications.

% Relative

Percentage is relative to the parent element. For font-size, 100% equals the parent's font-size. For width, 100% fills the parent. Context changes what the percentage refers to.

vw / vh Viewport

Viewport units: 1vw = 1% of viewport width, 1vh = 1% of viewport height. Ideal for full-screen layouts, responsive typography (via clamp()), and elements that should scale with the browser window.