PX to EM Converter (px, em, rem, pt & % for CSS)

Understanding the px to em converter — concept and principle

CSS offers absolute units like pixels and points and relative units like em, rem and percent. This converter changes a size between px, em, rem, pt and % given the parent and root font sizes, which helps when turning a design mock-up in pixels into scalable CSS.

With a 16 px root, 24 px is 1.5 rem.

How it is calculated

Everything is first converted to pixels:

em: value × parent font size; rem: value × root font size
pt: value × 96 ÷ 72 (1 in = 96 px = 72 pt)
%: value × parent font size ÷ 100

Then from pixels: em = px ÷ parent, rem = px ÷ root, pt = px × 72 ÷ 96, % = px ÷ parent × 100

Browsers' default root font size is commonly 16 px, but users can change it.

The principle

Relative units scale with font size. 1 em equals the parent's font size when used for font-size, so nested em values multiply. 1 rem always refers to the root html element, so it does not compound and is easier to predict. Using rem for text respects the reader's browser font setting, which helps people who need larger text. Points come from print and are fixed: CSS defines an inch as 96 px and 72 pt, so 1 pt is 4/3 px.

Worked example

Default inputs: 24 px to rem, parent 16 px, root 16 px.

24 px stays 24 px (24 px).
rem = 24 ÷ 16 = 1.5rem (the result).
em = 24 ÷ 16 = 1.5.
pt = 24 × 72 ÷ 96 = 18 pt.
% of parent = 24 ÷ 16 × 100 = 150%.

Each point is the calculator re-run with only “Root (html) font size (px)” changed; the gold point is the default example. Change the inputs above and this chart follows your numbers.

Root (html) font size (px)	Result
4	6rem
8	3rem
12	2rem
16	1.5rem
20	1.2rem
24	1rem
32	0.75rem

How to read the result

With a 16 px root, common sizes are 0.875rem = 14 px, 1rem = 16 px, 1.25rem = 20 px and 1.5rem = 24 px. If a component sits inside a parent with a different font size, em values change while rem values do not. Use em for spacing that should scale with the component's own text, and rem for consistent sizes across the page.

Common mistakes

Assuming 1em is always 16 px; it depends on the parent.
Nesting em font sizes and getting compounding growth or shrinkage.
Setting the root font size in px, which overrides users' browser preferences.
Using pt for screen layouts as if it were the same as px.

Keep in mind: Users and browsers can change default font sizes. Test layouts at larger text settings for accessibility.

Frequently asked questions

How many px is 1rem?

Usually 16 px, the common browser default, unless the root font size is changed.

What is the difference between em and rem?

em is relative to the parent's font size; rem is relative to the root font size.

How do I convert pt to px?

Multiply by 4/3; 12 pt is 16 px.

Should I use rem for font sizes?

It is widely recommended because it respects the user's preferred text size.

Sources: W3C, CSS Values and Units Module Level 4, font-relative lengths (em, rem) and absolute lengths (1in = 96px = 72pt) · MDN Web Docs, "CSS values and units"

Checked 9 Nov 2026. W3C CSS Values and Units Module Level 4, §6.1 font-relative lengths (em, rem) and §6.2 absolute lengths (1in = 96px = 72pt); MDN Web Docs, “CSS values and units”.

Your numbers