HesapHanem

em to Pixel Converter

Enter a value in em and the base font size to convert to pixels.

Result

27.00 px

How it is calculated

The conversion is a single multiplication:

pixels = em × base font size (px)

The base is the font size, in pixels, of the element the em is measured against. If you leave it empty, the tool uses 16, the usual browser default. The base must be above zero; the em value can be any number, including a negative one for margins. The result is rounded to two decimals. The tool does no compounding: if an element's em is relative to a parent that itself uses em, first work out the parent's pixel size and enter that as the base.

Worked example

A paragraph is set to 1.5em inside a container whose font size is 18px. Pixels = 1.5 × 18 = 27.00 px. With the default 16px base the same 1.5em would be 24 px, which shows why the base matters.

Try this example →

Common mistakes

  • Assuming 1em is always 16px; it equals the font size of the relevant element, which may be 18, 20 or something else.
  • Ignoring nesting. A 1.2em list inside a 1.2em container compounds to 1.44 times the original size, so use the parent's actual pixel size as the base.
  • Mixing up em and rem: rem always refers to the root element's size, em to the element's own or its parent's size.
  • Using the result for font-size when the em was meant for padding or margin. In those properties em refers to the element's own font size, not the parent's.
  • Typing the base as a percentage or in em; the field expects pixels.

Sources

About this calculator

em is a relative CSS length unit tied to font size: 1em always equals the current font-size of the element it's applied to (or, when used for font-size itself, the parent element's font-size). Browsers default that root font-size to 16px, so at the default setting 1em = 16px, and in general px = em × base font-size — a heading set at 2em on a 16px base renders at 32px, but the same 2em on an 18px base renders at 36px.

Because em scales with a user's or a parent element's font-size, it's the unit CSS developers reach for in responsive and accessible typography — line-height, margins, and font-size that should grow when someone bumps up their browser's text-size setting. Converting between em and pixels is a routine step when translating a pixel-based design mockup (Figma, Sketch) into scalable, accessible CSS.

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    Going the other way from a design mockup is a one-step division you can do by hand: em equals pixels divided by the base, so a 20px label on the default 16px base is 1.25em. This page only multiplies, so use it to confirm that figure by entering 1.25 and checking that 20.00 px comes back. Fractional results such as 27.2 px are normal, because browsers lay text out in sub-pixels. What base size does your project use?

Popular calculators

Loan Calculator

Monthly payment, total interest and full amortization schedule.

Percentage Calculator

Percent change, percent of, and ratio calculations.

Discount Calculator

Calculate final price, savings, and discount amount.

BMI Calculator

Body mass index from height and weight (metric or imperial).

Age Calculator

Compute your exact age in years, months and days from a birth date.

Compound Interest Calculator

Calculate the final amount and interest earned with compounding.

All Calculators