How do you convert px to em?

Divide the pixel value by the current element's font-size. For example, if the element font-size is 16px and you want 24px of padding, em = 24 ÷ 16 = 1.5em.

What's the difference between em and rem?

em is relative to the font-size of the current element. rem is relative to the root (html) font-size. Our tool lets you set both so you can see px → em and px → rem at the same time.

What root size should I use?

Most browsers default to 16px. Many CSS frameworks set the root to 16px or sometimes 62.5% (which effectively makes 1rem = 10px). Enter the root size used in your project for accurate conversion.

Pixels to Ems Converter (px ⇄ em ⇄ rem)

Quick px → em table (context: 16px)

px	em	rem (root 16px)
8	0.5	0.5
12	0.75	0.75
14	0.875	0.875
16	1	1
20	1.25	1.25
24	1.5	1.5
32	2	2

How the px → em → rem conversion works

px are absolute (device pixels), while em and rem are relative. Responsive web design prefers relative units because they scale with user settings and container font-sizes.

Formulas

em = px ÷ contextFontSize

rem = px ÷ rootFontSize

If you know em and want px: px = em × contextFontSize

em vs rem

em is relative to the current element’s font-size and compounds (nested elements can multiply the effect). rem is relative to the root HTML font-size and stays consistent throughout the document.

FAQ

1. Which unit should I use for padding/margin?

Use em if you want spacing to scale with the element’s text; use rem for consistent spacing across components.

2. My design is in Figma in px — what do I enter?

Enter the exact px from the design, then input the real font-size used in that component. The converter will output em/rem you can paste into your CSS.

3. Why is my number not round?

Because not all px values divide evenly by your chosen font-size. You can round to 3–4 decimals; browsers handle that fine.