PX to EM & EM to PX Converter (Calculator)

Quick answer: to convert px to em, divide the pixel value by the parent font size. To convert em to px, multiply the em value by the parent font size. At the default 16px parent, 16px is 1em, 12px is 0.75em, 1em is 16px and 1.5em is 24px. The calculator above handles px to em conversion and em to px conversion for any parent size, including bulk lists, and works the same for pixel to em and em to pixel.

What is EM in CSS?

EM is a CSS unit relative to font size. On the font-size property, 1em equals the font size of the parent element: with a 16px parent, 1em is 16px, and with a 20px parent it is 20px. On every other property, such as padding, margin and width, 1em equals the element's own font size. 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. The PX to EM guide walks through both cases with examples.

How to Convert PX to EM

Divide the pixel value by the parent element's font size (for padding, margin and other properties, use the element's own font size):

Examples at 16px parent:

How to Convert EM to PX

Multiply the em value by the parent element's font size (or the element's own font size for properties other than 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.8em	12.8px	Captions and fine print
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
1.6em	25.6px	Large subheadings
2em	32px	Section headings
2.5em	40px	Large headings

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

1em in PX at Different Parent Font Sizes

1em always equals the parent font size, so 1 em in px changes with the context. This table shows the most searched em values at six common parent sizes. For any other size, set the Parent Font Size in the calculator.

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. The second argument is the context font size, so pass the element's own font size when converting padding or margin:

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?

At the browser default of 16px, 1em in px is 16px. Because 1em always follows the parent font size, set a different Parent Font Size in the calculator and the result updates, or check the parent size table above for 1em at 12px, 14px, 18px, 20px and 24px.

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.