Should I use rem or em?

rem for type scales, because it does not compound when elements nest. em for padding and margins that should scale with the local text size.

Why is 16px equal to 12pt?

CSS defines an inch as 96 pixels and a point as one seventy-second of an inch, so a point is exactly four thirds of a pixel.

Technologydesign

CSS Unit Converter

CSS unit conversion between px, rem, em, pt and percent. The difference that matters is that rem is relative to the root and em to the parent, so nested em compounds and rem does not.

Also called: px to rem converter, rem calculator.

In px

24 px is 24px, 1.5rem, 1.5em, 18pt or 150%. rem is relative to the root font size and em to the parent, so nested em values compound and rem values do not.

In rem

1.5

In em

1.5

In pt

In percent

150

On rem against em

rem is relative to the root font size and em to the parent, so nested em values compound and rem values do not.

How this is calculated

Method and background

How this is calculated

Everything converts through pixels. A rem is a multiple of the root font size, so it is stable wherever it appears. An em is a multiple of the parent element's font size, so nesting compounds: two levels of 0.9em is 0.81, not 0.9. That compounding is why rem is the safer default for type scales and em remains useful for spacing that should track the local font size. The pt to px ratio of 4:3 comes from CSS defining a point as 1/72 inch and an inch as 96 pixels.

rem is relative to the root font size and em to the parent, which is the whole difference between them

r: Root font size
p: Parent font size

Worked examples

Each of these is asserted on every build. If a change to the engine ever moved one of these answers, the build would fail before the page could print it.

24px at a 16px root

Value: 24
From: px
Root font size: 16 px
Parent font size, for em: 16 px

In px24

24/16 rem; 24 x 72/96 pt

Open this example

12pt is exactly 16px

Value: 12
From: pt
Root font size: 16 px
Parent font size, for em: 16 px

In px16

boundary: the 4:3 definition

Open this example

Method and limits

What it assumes

A browser default of 96 CSS pixels to the inch.

What it deliberately does not model

A user who changes their browser font size changes what a rem resolves to, which is the point of using it.
Percent means different things by property: relative to the parent font size for type, to the containing block for width.

Formula version 1.0.0 · definition 1.0.0 · India · Report a problem with this calculator

Frequently asked questions

Should I use rem or em?: rem for type scales, because it does not compound when elements nest. em for padding and margins that should scale with the local text size.
Why is 16px equal to 12pt?: CSS defines an inch as 96 pixels and a point as one seventy-second of an inch, so a point is exactly four thirds of a pixel.