EM to Percent Converter

Q: How do I convert em to percent (%)?

Multiply by 100: 1.5em × 100 = 150%. The tool does this for you and lets you change the reference size, because that reference is what makes the answer different from one project to the next.

Q: What root font size should I use?

Browsers default to 16px, so 16 is the right starting point unless your stylesheet sets a different size on the html element. If your CSS sets `html { font-size: 62.5% }` — a common trick to make 1rem equal 10px — set the root size to 10 here instead.

Q: Should I use px or a relative unit?

Use relative units (rem, em) for anything that should scale with the reader's font-size preference: type, spacing, and container widths. Pixels are fine for things that genuinely should not scale, such as hairline borders and some shadow offsets. The accessibility rule of thumb is that a user who sets a larger default font size in their browser should see your layout grow with it.

Q: Is my data sent anywhere?

No. The conversion is arithmetic done in your browser — nothing is uploaded, and the page works offline once loaded.

Q: If em and % are the same, which should I use?

Use percent on the root element, because html { font-size: 100% } clearly signals "respect the reader's default". Use em for spacing that should scale with the text of the element it belongs to — padding inside a button, for example. For everything else, rem is usually the better answer than either, because it does not compound.

Q: Are they identical on every property?

No — only on font-size. On width, height, padding and margin, a percentage resolves against the containing block while em resolves against the element's own font size. width: 50% and width: 0.5em are almost never the same thing.

Convert em to percent — the same measurement written two ways, with the conversion table and the layout caveat.

Value to convert (em)

Result (%)

Root / parent font size

Browsers default to 16px. Use 10 if your CSS sets html { font-size: 62.5% }.

About this conversion

The same value at other root sizes

Root size	Result

Common conversions at 16 px

em	%

What It Does

For font sizes, em and percent are the same measurement in different clothing: both are relative to the parent element, so 1em is always 100% and the conversion is a plain ×100 that never depends on any font size. The reason to convert is style and context rather than maths — percentages read better on the root element, em reads better for spacing that should track the text. This tool also flags where the equivalence stops holding, because on width and padding the two units diverge completely.

When to Use It

You are converting a design handed over in em into a stylesheet that uses percent (%) for accessibility.
You inherited a codebase that mixes units and you need the % equivalent of an existing em value.
You want to check what a em value becomes when the user changes their browser's default font size.
You are writing a design-token scale and need the same step expressed in both units.

Worked Examples

1.5

1.5em is 150%. Change the parent size to anything you like — it is still 150%.

0.875

0.875em is 87.5%, the usual small-text step.

2

2em is 200%. Nested inside another 2em element it renders four times the base size, which is the trap both units share.

Features

Instant two-way conversion

Configurable root/parent font size

Full conversion table for common root sizes

Fractional-pixel rounding warning

Copy the value or the whole table

Works offline in your browser

No uploads or tracking

How to Use

1. Enter the em value you want to convert. 2. Set the root (or parent) font size the value should be measured against — 16px is the browser default. 3. Read the percent (%) result, or copy the whole conversion table for the sizes you use.

Common Mistakes

Assuming the conversion is fixed. 1em is exactly 100%, whatever the parent font size happens to be — the same em value converts differently depending on that size.
Confusing em with rem. `em` is relative to the *parent* element's font size and therefore compounds when nested; `rem` is always relative to the root element and does not.
Setting a px font size on the root element. That overrides the user's browser font-size preference, which defeats the accessibility reason for using relative units at all.
Rounding too early. Keep the fraction (1.375rem, not 1.4rem) — the browser resolves sub-pixel values fine and the rounding error compounds across a scale.

Frequently Asked Questions

How do I convert em to percent (%)?

What root font size should I use?

Should I use px or a relative unit?

Is my data sent anywhere?

If em and % are the same, which should I use?

Are they identical on every property?

Related Tools

CSS Unit Converter

The conversion runs entirely in your browser. Nothing is uploaded and nothing is stored.