About

Mismatched CSS units break responsive layouts. A heading set to 24px on a desktop becomes illegible or oversized when a user adjusts their browser's default font size - because pixels ignore that preference. The em unit scales relative to a base font size (base), typically the parent element's computed font-size. This converter computes the bidirectional relationship: given a base of 16px, a value of 24px equals 1.5em. Get it wrong and your entire typographic scale collapses across breakpoints.

The tool assumes a single inheritance context. Nested em values compound - 1.5em inside a 1.5em parent renders at 2.25em of the root. For deep nesting, consider using rem instead, which always references the root font-size. This tool does not account for compounding. It converts a single level against the base you provide.

Formulas

The conversion between px and em is a linear ratio governed by the base font size of the parent element.

em = pxbase

px = em × base

Where px is the pixel value to convert, em is the resulting relative unit, and base is the parent element's computed font-size in pixels. Most browsers default base to 16px. Note that em compounds through nesting: an element at 1.5em inside another at 1.5em renders at 1.5 × 1.5 = 2.25em of the root. The rem unit avoids this by always referencing the root <html> font size.

Reference Data

Pixels (px)	Em at 10px base	Em at 12px base	Em at 14px base	Em at 16px base	Em at 18px base	Em at 20px base	Em at 24px base
8	0.8	0.6667	0.5714	0.5	0.4444	0.4	0.3333
9	0.9	0.75	0.6429	0.5625	0.5	0.45	0.375
10	1	0.8333	0.7143	0.625	0.5556	0.5	0.4167
11	1.1	0.9167	0.7857	0.6875	0.6111	0.55	0.4583
12	1.2	1	0.8571	0.75	0.6667	0.6	0.5
13	1.3	1.0833	0.9286	0.8125	0.7222	0.65	0.5417
14	1.4	1.1667	1	0.875	0.7778	0.7	0.5833
16	1.6	1.3333	1.1429	1	0.8889	0.8	0.6667
18	1.8	1.5	1.2857	1.125	1	0.9	0.75
20	2	1.6667	1.4286	1.25	1.1111	1	0.8333
22	2.2	1.8333	1.5714	1.375	1.2222	1.1	0.9167
24	2.4	2	1.7143	1.5	1.3333	1.2	1
28	2.8	2.3333	2	1.75	1.5556	1.4	1.1667
32	3.2	2.6667	2.2857	2	1.7778	1.6	1.3333
36	3.6	3	2.5714	2.25	2	1.8	1.5
40	4	3.3333	2.8571	2.5	2.2222	2	1.6667
48	4.8	4	3.4286	3	2.6667	2.4	2
56	5.6	4.6667	4	3.5	3.1111	2.8	2.3333
64	6.4	5.3333	4.5714	4	3.5556	3.2	2.6667
72	7.2	6	5.1429	4.5	4	3.6	3

Frequently Asked Questions

Each em value multiplies against its parent's computed font-size, not the root. If a parent is set to 1.5em (24px at 16px base) and a child is also 1.5em, the child renders at 1.5 × 24px = 36px, which is 2.25em of the root. This compounding makes deeply nested em values unpredictable. Use rem for consistent sizing across nesting depths.

Use em when you want a component's sizing to scale proportionally with its parent's font-size - common for padding, margins, and media-object patterns inside typographic components. Use rem for global consistency (body text, headings, layout spacing). Use px only for borders, shadows, and elements that must not scale (e.g., 1px hairline dividers).

All major browsers (Chrome, Firefox, Safari, Edge) default to 16px for the root html element. However, users can override this in browser settings for accessibility. Designs built with em or rem respect this preference; designs in px ignore it. The 62.5% trick (setting html { font-size: 62.5% }) changes the base to 10px, making mental math easier: 1.6rem = 16px.

No. This tool performs a static arithmetic conversion between px and em at a fixed base. CSS functions like calc(1em + 10px) or clamp() involve runtime resolution by the browser's layout engine and cannot be pre-computed statically. For fluid typography using viewport units (vw), dedicated clamp calculators are more appropriate.

In browser DevTools (F12), select the target element, open the Computed tab, and search for font-size. The value shown in pixels is your base for em calculations on that element's children. Alternatively, run getComputedStyle(element).fontSize in the console. This returns a string like "16px" which you parse to a number.

Precision matters for sub-pixel rendering. Modern browsers render at sub-pixel accuracy. A value of 0.8571em (12px at 14px base) truncated to 0.86em introduces a 0.04px rounding error per element. Over 50 elements on a page, that compounds to ~2px of layout drift. Four decimal places keep error below 0.01px. This converter allows you to configure precision from 1 to 6 decimal places.