Convert em to %
At the browser default root font size of 16 px, 1em = 100%. Change the base below if your project uses a different root size.
Formula
% = em × 100
em = % × 0.01Because both units are relative, this ratio holds only at a 16 px base. If your project sets html { font-size: 62.5% } — a common trick that makes 1rem equal 10 px — set the base above to 10 instead.
EM to Percent conversion table
| em | % |
|---|---|
| 8em | 800% |
| 10em | 1000% |
| 12em | 1200% |
| 14em | 1400% |
| 16em | 1600% |
| 18em | 1800% |
| 20em | 2000% |
| 24em | 2400% |
| 28em | 2800% |
| 32em | 3200% |
| 36em | 3600% |
| 40em | 4000% |
| 48em | 4800% |
| 56em | 5600% |
| 64em | 6400% |
| 72em | 7200% |
| 80em | 8000% |
| 96em | 9600% |
| 128em | 12800% |
About em
One em equals the font size of the current element. It compounds through nesting, which makes it powerful for component-local spacing and dangerous for global scales.
About %
For font size, a percentage is relative to the parent element’s font size, so 100% equals 16 px at the default. Like em, percentages compound through nesting.
Which unit should you use?
| Property | Recommended unit | Why |
|---|---|---|
| Font size | rem | Scales with the user's browser font-size preference, which px ignores — an accessibility requirement. |
| Padding and margin | rem or em | rem for a consistent global rhythm; em when the spacing should track the component's own text size. |
| Borders and hairlines | px | You almost always want exactly one crisp pixel, not a value that scales. |
| Media query breakpoints | em | Historically the most reliable across browsers when the user zooms. |
| Print stylesheets | pt, cm, mm | These map to real physical measurements on paper. |
Frequently asked questions
What is 16em in %?
16em equals 1600% at a 16 px root font size.
How do I convert em to %?
Multiply the em value by 100. Going the other way, multiply the % value by 0.01.
Does the root font size change the result?
Yes. Both units are relative, so the ratio between them is stable, but their pixel values move together with the root size.
Why does CSS use 96 pixels per inch?
It is a historical convention from early desktop displays that became the fixed CSS reference. It has nothing to do with your monitor's real pixel density — the browser scales CSS pixels to physical ones for you.