EM to Percent
Convert em values to percentages.
Convert EM (em) to Percent (%). Results update as you type.
em
Browser default is 16px
em to % conversion table (base 16px)
| EM | Percent |
|---|---|
| 0.25em | 25% |
| 0.5em | 50% |
| 0.75em | 75% |
| 0.875em | 87.5% |
| 1em | 100% |
| 1.125em | 112.5% |
| 1.25em | 125% |
| 1.5em | 150% |
| 1.75em | 175% |
| 2em | 200% |
| 2.5em | 250% |
| 3em | 300% |
| 4em | 400% |
EM to Percent Converter
Switch a font size between em notation and percentage notation. For the font-size property both units are relative to the parent element's font size, so the conversion is a simple scale factor of 100 – but when you are converting a whole stylesheet or a list of values, the tool saves time and avoids typos.
Formula
percent = em × 100
The base font size cancels out: 1.5em of a 16px parent is 24px, and 24px is 150% of 16px. Change the base in the tool and you will see the percentage stay the same.
| EM | Percent |
|---|---|
| 0.75em | 75% |
| 0.8em | 80% |
| 0.875em | 87.5% |
| 1.2em | 120% |
| 2em | 200% |
Worked example: rewriting legacy CSS
An older theme uses h1 { font-size: 2em; } h2 { font-size: 1.5em; } small { font-size: 0.8em; }. A style guide asks for percentages, so the rules become 200%, 150%, and 80%. Paste the three em values into the bulk box and copy the results in one step. The rendered sizes stay exactly the same.
Where em and percent are not the same
The equivalence only holds for font-size. Other properties interpret percentages differently:
paddingandmarginin percent refer to the containing block's width.widthin percent refers to the parent's width.line-heightin percent is based on the element's own font size and, like em, is inherited as a computed length rather than a ratio.
So padding: 1em and padding: 100% produce very different results. Convert only font sizes with this tool.
Next steps: turn em into pixels with EM to PX, or go back with Percent to EM.
Frequently Asked Questions
How do I convert em to percent?
Multiply the em value by 100. For font-size, 1em and 100% both refer to the parent font size, so 0.875em = 87.5% and 1.5em = 150%.
Are em and percent identical in CSS?
For the font-size property they give the same result. For other properties they differ: padding in em uses the element's font size, while padding in percent uses the width of the containing block.
Does the base font size change the result?
No. Both units are relative to the same parent font size, so the base cancels out. The field only matters when you also want to see the pixel size.