Free PX to EM Converter Online - TestMu AI (Formerly LambdaTest)

What is a PX to EM converter?

A PX to EM converter turns a pixel length into the CSS em unit, a font-relative length defined by the W3C CSS Values and Units Module Level 3. One em equals the font-size in effect on the element, so the conversion is a simple division by the base font-size.

For a root-relative unit that never compounds, see the PX to REM Converter, or convert the other direction with the REM to PX Converter.

How does em work?

The em unit is relative to the computed font-size of the element it is used on, and browsers default the root font-size to 16px. At that base, 16px equals 1em and 24px equals 1.5em.

• Contextual: on a heading with a 32px font-size, 1em is 32px, not 16px.
• Compounds: nested elements multiply, so 1.2em inside 1.2em resolves to 1.44 times the parent size.
• Absolute vs relative: a px value is fixed, while em scales with the element's font-size, so em responds to browser zoom and text-size settings that px ignores.
• Different from rem: rem always resolves against the root font-size, so it does not compound.

All processing happens in your browser. No values are uploaded to any server.

How to use this PX to EM converter

• Set the base font-size: type a value or pick a context preset (Root, h1, h2, and more) so em resolves in the right context.
• Enter pixels: type a px value and read the em result instantly.
• Or enter em: the fields are bidirectional, so an em value converts back to px.
• Copy the output: use Copy EM for the raw value or Copy CSS for a ready font-size declaration.
• Scan the table: the live table lists common px values in em at your chosen base.

Difference between em and rem

Common PX to EM values (base 16px)

At the default 16px base, dividing by 16 gives the em value. For example, a 12px caption is 0.75em and a 24px subheading is 1.5em.

Use cases of the PX to EM converter

• Responsive typography: convert a designer's px spec into em so text scales with the surrounding font-size.
• Accessible scaling: em and rem honor a user's browser font-size preference, which supports accessibility testing goals that px alone cannot meet.
• Component libraries: express padding and margins in em so a component's spacing tracks its own text size.
• QA of font scaling: verify how layouts respond when the base font-size changes across breakpoints and devices.

Frequently Asked Questions (FAQs)

Is 16px equal to 1em?

Yes, at the default base. Browsers set the root font-size to 16px, so when em resolves against a 16px font-size, 16px equals 1em. If the base font-size is different, the ratio changes.

How do I convert px to em?

Divide the pixel value by the base font-size in pixels. For example, 24px at a 16px base is 24 / 16 = 1.5em. This tool does the division for you and lets you set any base.

Why is 1em different on different elements?

The em unit is relative to the font-size in effect on the element, not the root. An element with a 32px font-size makes 1em equal 32px, while a 12px element makes 1em equal 12px. Set the base font-size in the tool to match the element.

What is the difference between em and rem?

em is relative to the current element's font-size and can compound through nested elements. rem is always relative to the root (html) font-size, so it stays constant regardless of nesting.

Can I convert em back to px?

Yes. The converter is bidirectional. Type a value in the em field and it multiplies by the base font-size to give pixels, so 1.5em at a 16px base becomes 24px.

Should I use px or em for font-size?

em and rem scale with the user's browser font-size preference, which helps accessibility, while px stays fixed. Many teams use rem for font-size and em for spacing that should track the local font-size.

What is the difference between px and em?

A pixel is an absolute, fixed length, while em is relative to the element's font-size. 16px stays 16px everywhere, but 1em equals whatever font-size applies, so em scales with the surrounding text and browser zoom while px does not.

Does 1em always equal 16px?

No. 1em equals 16px only when the applicable font-size is 16px, which is the browser default. On an element with a different font-size, 1em changes to match it, so a 20px element makes 1em equal 20px. Set the base in the tool to check.

Does this px to em converter run in my browser?

Yes. All processing happens in your browser with plain arithmetic. No values are uploaded to any server, and no sign-up is required.