Why use em instead of pixels?

Em units are relative and scale with the user font size preference. This makes designs more accessible and responsive. Pixel values are absolute and do not adapt.

Should I use em or rem?

Use rem for most sizing (consistent, based on root). Use em when you specifically want sizing to cascade relative to the parent, such as padding that scales with the component text size.

Em to Pixels Converter

Convert CSS em units to pixels based on the parent element font size.

Save

Em Value

Base Font Size

Pixels

24.0 px

Rem (if root = 16px)1.500 rem

Points18.0 pt

View formula & how it works →

Em to Pixels

Pixels = Em x Base Font Size

What is an Em?

In CSS, 1em equals the computed font size of the parent element. If the parent is 16px, then 1em = 16px, 1.5em = 24px, 0.875em = 14px.

Em vs Rem

em is relative to the parent element font size (cascading)

rem is relative to the root element font size (consistent)

Default browser root font size is 16px.

Example Calculation

1.5em with a 16px base font.

01Pixels = 1.5 x 16 = 24px
02Rem = 24 / 16 = 1.5rem
03Points = 24 x 0.75 = 18pt

Frequently Asked Questions

Learn More

Metric vs Imperial: A Complete Guide to the Two Measurement Systems

Understand the differences between the metric and imperial measurement systems. Learn their history, how they compare, and when to use each system for length, weight, volume, and temperature.