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

By DevToolHQ teamUpdated 2026-04-15100% client-sideMethodology

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

Quick tip: 1rem = 16px · 1vw = 14.4px · 1pt = 1.3333px

About CSS Unit Converter

Converts CSS values between px, rem, em, vw, vh, pt, and percent. Enter a value in any unit and see all equivalent values simultaneously. Configurable base font size (default 16px), viewport dimensions (default 1440×900), and parent element size let you match your actual project context. The rem vs em distinction is a frequent source of confusion. rem (root em) is always relative to the html element's font size — typically 16px by default, but often set to 10px in projects that want 1rem = 10px for easy mental math. em is relative to the nearest ancestor element's font size, which means the same em value produces different pixel results in different contexts. rem is generally preferred for component sizing because it is predictable regardless of nesting depth. Use em when you want a component's internal spacing to scale with the component's own font size. The viewport units (vw, vh) are relative to the browser window dimensions. 1vw = 1% of viewport width, 1vh = 1% of viewport height. These are commonly used for responsive typography with clamp(), full-bleed hero sections, and sticky element sizing. The quick-reference table shows the rem equivalents for common pixel values (8, 12, 14, 16, 20, 24, 32, 48, 64) at the configured base size — useful to keep open alongside your editor.