EM Units Explained: Relative Sizing and Compounding
Em units are powerful but easy to misjudge in nested layouts. This guide explains how they work and how to convert them safely.
What is the EM to PX Converter?
An em is relative to the font size of the element's parent, so the same em value can mean different pixels in different parts of a page. This tool multiplies an em value by the parent font size to give pixels. Nested elements compound, since each level's em is based on its own parent, so for deeply nested text you need the computed parent size at that level, not the root size.
How to use it
- Enter the em value.
- Enter the parent font size in pixels.
- Press the button to see the pixel value.
Worked example
1.5 em with a 16 pixel parent font size converts to 24 px.
How many pixels is 2 em?
It depends on the parent font size. With a 16 pixel parent, 2 em is 32 pixels; with a 20 pixel parent, it is 40 pixels.
Frequently asked questions
What is the difference between em and rem?
Em is relative to the parent element's font size, while rem is relative to the root element's font size. That makes rem more predictable across a page.
Why do nested em values grow unexpectedly?
Because each nested level multiplies again. An em inside an em compounds, so a value that looks small at the top can become large several levels down.