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

    Ready to run the numbers?

    Open Em to Pixels Converter