Em to Pixels Converter Formula

Understand the math behind the em to pixels converter. Each variable explained with a worked example.

Use the Em to Pixels Converter

Formulas Used

Pixels

pixels = em_value * base_size

Rem (if root = 16px)

rem_value = em_value * base_size / 16

Points

points = em_value * base_size * 0.75

Variables

VariableDescriptionDefault
em_valueEm Value(em)1.5
base_sizeBase Font Size(px)16

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.

    Worked Example

    1.5em with a 16px base font.

    em_value = 1.5base_size = 16
    1. 01Pixels = 1.5 x 16 = 24px
    2. 02Rem = 24 / 16 = 1.5rem
    3. 03Points = 24 x 0.75 = 18pt

    Frequently Asked Questions

    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.

    Ready to run the numbers?

    Open Em to Pixels Converter