em vs rem — which should I use?

Use rem for typography and layout (predictable, no compounding). Use em for component-scoped sizing — buttons, form inputs, icons inline with text — where you want padding and gap to scale with the element's font-size. em compounds through nested elements; rem does not.

What is the em compounding problem?

em values multiply through nesting. A 1.2em heading inside a 1.2em container resolves to 1.44em = 23px at a 16px root. Three levels deep: 1.728em ≈ 28px. This is why rem (which always references the root) is preferred for typography.

When should I use em?

For buttons (padding: 0.5em 1em scales with text), icons next to text (width: 1em; height: 1em sizes the icon to the text line), and indentation in lists or quotes. Anywhere you want one font-size change to resize the entire component.

px to em Converter — Free Online CSS Unit Calculator

Home/Design Tools/px ↔ em Converter

Visual Layout Preview

16px

Generated CSS

font-size: 1em; /* 16px */

What Is em in CSS?

em is a relative CSS unit calculated against the font-size of the element's immediate parent. If a parent is 20px, then 1em = 20px inside that parent. em is the original CSS relative unit (rem came later, in CSS3) and is still the right choice for component-scoped sizing — padding, margin, and font-size that should scale together when the component is reused at different sizes.

px to em Converter Online — What This Tool Does

This free px to em converter performs bidirectional conversion in your browser. Enter a pixel value and a parent font size to see the em equivalent, with a live visual preview and ready-to-copy CSS output.

How to Convert px to em

Enter a pixel value in the px field — the em equivalent appears instantly.
Adjust the Parent Font Size to match the actual context where you'll use the em value (default 16px).
Or enter an em value to see the equivalent px (bidirectional).
The visual preview shows the computed pixel width.
Click Copy CSS for a ready-to-paste declaration.

em vs rem — Key Differences

em = relative to parent's font-size. Compounds through nested elements (1.2em × 1.2em × 1.2em = 1.728em effective).
rem = relative to root <html> font-size. Does not compound — predictable across the page.
Use em for component internals: a button's padding scales with its text. Resize the button by changing one font-size.
Use rem for global typography, layout spacing, and breakpoints.

When to Use em (Component Scoping)

Buttons — padding: 0.5em 1em scales button padding with text size.
Form inputs — padding: 0.4em 0.6em stays proportional across small/medium/large variants.
Icons next to text — width: 1em; height: 1em sizes an icon to match the text line.
Indentation in lists or quotes — margin-left: 1.5em keeps spacing proportional.

The em Compounding Trap

Because em is relative to the parent's font-size, nested em values multiply. A 1.2em heading inside a 1.2em container is effectively 1.44em = 23px at a 16px root. Three levels deep: 1.728em ≈ 28px. This is why rem (which doesn't compound) is preferred for typography. Use em only when you actually want this scaling behaviour.

Tips & Tricks

For typography, prefer rem — avoids the compounding trap. Use our px to rem converter.
For component internals, prefer em — padding, gap, and icon sizing should scale with text.
Set component font-size once in px or rem, then use em for everything else inside the component. Resize by changing one value.
Test em-heavy components nested — make sure compounding doesn't surprise you.

Related Tools

px ↔ rem Converter — typography and design-system sizing.
px ↔ % Converter — fluid layout sizing relative to parent.
px ↔ vw / vh Converter — viewport-relative sizing.
rem ↔ em Converter — translate between the two relative font units.
Color Picker — pick brand colours for your design system.

Is My Data Sent to a Server?

No. All unit conversion runs entirely in your browser using simple JavaScript math. The values you enter — including any proprietary design-system tokens — never leave your device. There is no upload, no logging, and no analytics on the numbers you enter.