How this instrument works
An em is a relative unit: one em always equals the font size currently in effect on the element it is applied to, whatever that happens to be. Most desktop browsers ship with a default root font size of 16 pixels, which is why that figure opens the Base font size (px) field below, but that default is a starting point set by the browser, not a rule enforced anywhere. A page's own CSS can reset the root font size to something else entirely, and nested elements can inherit a different font size again from whatever contains them.
Designers deliberately override the 16-pixel default constantly: a body of long-form text might be set at 18 or 20 pixels for readability, a dense data table might drop to 13 or 14, and readers themselves can raise their browser's font-size setting well above 16 pixels for accessibility. Because one em always means the base size currently in force, the identical 24-pixel measurement converts to 1.5em against a 16-pixel base but to a different figure entirely once that base changes — there is no single correct em value for 24 pixels independent of context.
This dependence on context is exactly why accessibility guidance favours em, and its cousin rem, always relative to the root rather than to a parent, over fixed pixel values for text sizing: a page built in em scales cleanly when a reader increases their browser's base font size, while pixel-based text can resist that resizing in some browsers and configurations. Set the Base font size (px) field to whatever your project's root or parent font size actually is, rather than leaving it at the 16-pixel browser default, whenever you are converting for a page that has redefined its own baseline.
- Type your measurement into the Pixels field — it opens at 24 px.
- Base font size (px) opens at 16, the common unmodified browser default; replace it with your page's actual base if it differs.
- Read em below; it recalculates on every keystroke as either field changes.
- Working backwards from a known em value? Multiply by your base font size to recover pixels.
- Converting for a nested element? Use that element's parent font size as your base, not automatically 16.
Worked example — 24 px against two base sizes
Enter 24 into Pixels and leave Base font size (px) at its 16 default, and em reads 1.5 — a common heading size expressed relative to the standard unmodified browser baseline.
Now suppose the page in question has reset its base font size to 20 pixels instead of the browser default, and the design calls for 32 pixels of text on top of that base. Set Pixels to 32 and Base font size (px) to 20, and em reads 1.6 — a different ratio than the same 32-pixel measurement would have produced against a 16-pixel base, purely because the base itself moved.
Keep Base font size (px) at the unmodified 16-pixel default and set Pixels to 16 as well, and em reads exactly 1.0 — the browser's own default text size expressed in its own native unit, which is why 1em and 16px are treated as roughly interchangeable shorthand only when nothing has touched that default base.
Questions
Why isn't there one fixed pixel-to-em ratio?
Because an em is defined relative to a font size that itself can change from page to page, element to element, and reader to reader — it is not a fixed physical length the way a centimetre or an inch is. The Base font size (px) field exists because that relative reference point has to come from somewhere, and 16 pixels is only the common unmodified browser default, not a value guaranteed to apply to whatever page or component you are actually working on.
How do I find the actual base font size for my page?
Check the CSS rule applied to the html or body element, since that is what root-relative units ultimately resolve against; if no font-size rule targets it, most browsers fall back to their own default, commonly 16 pixels. For an em value nested inside other elements, the relevant base is the font size of that element's immediate parent, which may itself have been resized by earlier CSS rules further up the page.
What's the difference between em and rem?
Both are relative units expressed the same way, but they measure from different reference points. An em is relative to the font size of the element it is applied to, or that element's parent when used for font-size itself, so nested em values can compound as font sizes cascade down the page. A rem is always relative to the root html element's font size alone, regardless of nesting, which many developers find more predictable for consistent spacing and sizing across a page.
Is 16px always equal to 1em?
Only when the base font size in effect is genuinely 16 pixels, which is common but far from universal. Change that base to 20 pixels and 16px becomes 0.8em rather than 1em; change it to 12 pixels and 16px becomes about 1.333em. The 16-pixel figure is simply the typical unmodified browser default, not a fixed law connecting pixels and em the way 2.54 centimetres connects to one inch.
Why do accessibility guidelines recommend em or rem over px for text?
Because relative units scale automatically when a reader increases their browser's base font size for readability, while a fixed pixel value can resist that resizing in some browsers and configurations. Guidance around resizable text points toward relative sizing methods, including em, rem and percentage-based approaches, specifically so that enlarging the base font size actually enlarges the text built on top of it.
My design tool shows pixels — how do I turn that into em for my CSS?
Divide the pixel value your design tool shows by whatever base font size your project's CSS actually sets on the relevant element — not automatically 16, if your stylesheet has changed it. This calculator performs exactly that division: enter the pixel figure from your design file into Pixels, enter your project's real base font size into Base font size (px), and the em value in the result is what belongs in your stylesheet.