PX to EM & EM to PX Converter (Calculator)

What is EM in CSS?

EM is a CSS unit that is relative to the font size of its parent element. If a parent element has a font size of 16px, then 1em equals 16px for any child inside it. If the parent is 20px, then 1em equals 20px. This makes EM a contextual unit: its actual value changes depending on where in the DOM it is used.

The name EM comes from typography, where it historically referred to the width of the capital letter "M" in a given typeface. In CSS it has been redefined to mean the current font size of the element's context.

How to Convert PX to EM

Divide the pixel value by the parent element's font size:

Examples at 16px parent:

How to Convert EM to PX

Multiply the em value by the parent element's font size:

Examples at 16px parent:

PX to EM Conversion Table (16px parent)

PX	EM	Common Use
8px	0.5em	Extra small spacing
10px	0.625em	Small text, captions
12px	0.75em	Small labels
14px	0.875em	Secondary text
16px	1em	Base body text
18px	1.125em	Slightly larger body
20px	1.25em	Lead text
24px	1.5em	Subheadings
32px	2em	Section headings
48px	3em	Display headings

EM to PX Conversion Table (16px root)

Going the other direction is just as common, especially when you inherit a stylesheet full of em values and need to know the actual rendered pixel size. Here are the most searched em to px conversions at a 16px root:

EM	PX	Common Use
0.1em	1.6px	Fine border or hairline offsets
0.5em	8px	Extra small spacing
0.75em	12px	Small labels
0.875em	14px	Secondary text
0.9em	14.4px	Slightly reduced text
1em	16px	Base body text
1.1em	17.6px	Emphasized text
1.125em	18px	Slightly larger body
1.2em	19.2px	Lead paragraphs
1.25em	20px	Lead text
1.4em	22.4px	Small subheadings
1.5em	24px	Subheadings
2em	32px	Section headings

These figures assume a 16px parent, which is the browser default. If your parent element has a different font size, use the EM to PX tab in the calculator above to get an exact result for your context.

PX vs EM: A Quick Note

PX is fixed and absolute. EM scales with the font size of the element it's attached to. Use PX when you need pixel-perfect precision that never changes, such as a 1px border or a fixed-size icon. Use EM when you want a value to scale automatically with its component's font size, such as button padding, and reach for REM instead when you want a value like font-size to stay consistent no matter how deeply it is nested. For the full three-way comparison with rem, see the px vs em vs rem guide.

Converting Font-Size from PX to EM

The most common reason developers look up a px to em conversion is to set a CSS font-size value. The formula is the same as any other px to em conversion: divide the target pixel size by the font size of the parent element (not the element itself).

Because font-size is what defines 1em for any children of that element, em values compound each time they are nested inside another em font-size: each child is measured against its own parent, not the root. This is the main reason most teams set font-size in rem and reserve em for padding, margin, and other properties that should scale with the local font size. See our PX to EM guide for a full worked example of how compounding adds up across nested elements.

Using EM in Sass or SCSS

If you are converting px to em inside a Sass or SCSS file, this small function applies the same division formula and keeps it reusable across a project:

How to Use This Converter

1. Select PX to EM or EM to PX using the tabs
2. Enter your value and set the Parent Font Size, default is 16px
3. The result updates instantly. Click Copy Result to use in your CSS
4. For multiple values at once, use the Bulk Convert section, one value per line

Frequently Asked Questions

What is 1em in pixels?

1em equals the font size of the parent element, so at the default 16px parent, 1em in px is 16px. There is no fixed pixel value for 1em on its own, it always depends on the parent's font size: at a 20px parent, 1em equals 20px instead.

Why does my em font size look wrong when nested?

This is the compounding problem. If a parent element has font-size: 0.875em and the child also has font-size: 0.875em, the child's actual size is 0.875 x 0.875 = 0.766em of the grandparent, smaller than intended. Switch to REM for font sizes to avoid this entirely.

Should I use em or rem for padding and margin?

It depends on the intent. Use EM if you want padding to scale with the component's own font size. Use REM if you want spacing to be consistent regardless of font context.

Does changing the parent font size affect em values?

Yes, that is the definition of EM. If you change a parent element's font size, all EM values inside it recalculate relative to the new size.

Is there a free px to em calculator?

Yes, the calculator above converts both directions (px to em and em to px), lets you set a custom parent font size, and supports bulk conversion of multiple values at once. It's free with no login required.

How do I convert a CSS font-size from px to em?

Divide the target pixel size by the font size of the parent element, not the element itself. For example, if the parent is 16px and you want a 24px heading, set font-size: 1.5em (24 / 16 = 1.5).

What is 0.75em in pixels?

At the browser default of 16px, 0.75em equals 12px (0.75 x 16 = 12). If the parent element uses a different font size, multiply 0.75 by that value instead, or use the EM to PX tab above.

What is 1.1em, 1.2em, and 1.4em in pixels?

At the default 16px parent font size, 1.1em is 17.6px, 1.2em is 19.2px, and 1.4em is 22.4px. To convert any other em value to pixels, multiply it by the parent font size instead of 16 if your parent uses a different size.