What is the difference between rem and em?

rem (root em) is relative to the root element (html) font size, typically 16px. em is relative to the parent element's font size. Use rem for consistent sizing across components, em for context-dependent scaling.

How do I convert px to rem?

Divide the pixel value by the base font size. With a 16px base: 24px ÷ 16 = 1.5rem. If you change the root font size, all rem values scale accordingly.

When should I use vw over px?

Use vw for elements that should scale with the viewport width — hero text, full-width sections. 1vw = 1% of the viewport width. Be careful as it makes sizing viewport-dependent.

CSS Unit Converter

Code Converters

Convert px to rem, em, vw, vh, pt — with custom base font size

100% client-side processing

Base font size (1rem =)

Viewport width (1vw =)

Parent element (1em / 1% =)

Convert value

px16

rem1

em1

vw1.1111

vh1.7778

pt12

%100

Quick reference — px → rem (base 16px)

px	rem	vw (1440px)	pt
4	0.25	0.2778	3
8	0.5	0.5556	6
10	0.625	0.6944	7.5
12	0.75	0.8333	9
14	0.875	0.9722	10.5
16	1	1.1111	12
18	1.125	1.25	13.5
20	1.25	1.3889	15
24	1.5	1.6667	18
28	1.75	1.9444	21
32	2	2.2222	24
40	2.5	2.7778	30
48	3	3.3333	36
56	3.5	3.8889	42
64	4	4.4444	48
80	5	5.5556	60
96	6	6.6667	72