EM to Percent Converter
Convert between EM and Percentage (%) CSS units with customizable parent font size
Live Font Size Preview
Hello
Conversion Formula
How EM and Percent relate to each other
EM → %
% = em × 100
e.g. 1.5 × 100 = 150%
% → EM
em = % ÷ 100
e.g. 150 ÷ 100 = 1.5em
Note: Both EM and percent reference the parent element's font size — the conversion ratio is always 1:100.
CSS Style Properties
EM value
h1 {
font-size: 1em;
}Percent value
h1 {
font-size: 0%;
}EM to Percent Conversion Table
Parent font size: 16px
| EM | Percent (%) | Pixels (px) |
|---|---|---|
| 0.25em | 25% | 4px |
| 0.5em | 50% | 8px |
| 0.75em | 75% | 12px |
| 1em | 100% | 16px |
| 1.25em | 125% | 20px |
| 1.5em | 150% | 24px |
| 1.75em | 175% | 28px |
| 2em | 200% | 32px |
| 2.25em | 225% | 36px |
| 2.5em | 250% | 40px |
| 2.75em | 275% | 44px |
| 3em | 300% | 48px |
| 3.25em | 325% | 52px |
| 3.5em | 350% | 56px |
| 3.75em | 375% | 60px |
| 4em | 400% | 64px |
| 4.25em | 425% | 68px |
| 4.5em | 450% | 72px |
| 4.75em | 475% | 76px |
| 5em | 500% | 80px |
About EM to Percent Conversion
What is EM?
EM is a relative CSS unit. For font-size,
1em equals the parent element's font size. EM can compound when nested — setting 1.5em inside a 1.5em parent
results in 2.25× the ancestor size, which is something to watch for in deeply nested components.
What is Percent (%)?
Percent (%) is a relative CSS unit. For font-size,
it is also relative to the parent element's font size — making it functionally equivalent to EM.
100% means "same as the parent", 200% means double, and 50% means half.
The Conversion Formula
% = em × 100
Because both EM and percent reference the parent font size, the conversion is always a simple multiply by 100. 1.5em = 150%, always — no matter what the parent font size is.
When to Use EM vs Percent
- EM: Preferred in modern CSS, component libraries, and design systems; can also size padding, margin, and border-radius.
- Percent: More intuitive for designers; common in CMS themes and older stylesheets.
- For
font-sizethey are interchangeable — 1em = 100%. Choose EM for consistency with spacing properties.
Common Conversions
0.25em
25%
0.5em
50%
0.75em
75%
1em
100%
1.25em
125%
1.5em
150%
1.75em
175%
2em
200%
How to Use the EM to Percent Converter
- 1
Enter your value
Type the EM (or %) value you want to convert into the "From Value" input field.
- 2
Select the unit direction
Choose em or % in both dropdowns. Use the swap button to reverse direction instantly.
- 3
Adjust the parent font size if needed
Click Show Settings to set the parent font size. This affects the pixel column in the table and the live preview.
- 4
Read the result and copy
The converted value appears instantly in the "To Value" field. Click Copy to copy it to your clipboard.
- 5
Check the live preview and table
The Live Font Size Preview shows how the result looks visually. The table lists common EM values with their percent and pixel equivalents.
Tip: The EM-to-percent conversion does not depend on any font size setting — 1em is always 100%. The parent font size only affects the pixel column in the reference table and the live preview.
Common Use Cases
Designer–Developer Handoff
- • Convert EM values from code to percentage for designers reading specs
- • Translate EM-based design tokens to percentage equivalents for Figma
- • Align designer (percent) and developer (em) mental models in reviews
Legacy CSS Modernisation
- • Convert EM font sizes to percent for CMS themes that expect percentage values
- • Document existing EM values as percent for non-technical stakeholders
- • Audit a codebase and standardise mixed EM/percent usage
Email Template Development
- • Some email editors accept percentage font sizes — convert your EM values
- • Verify that heading sizes in EM will render readably as a percentage
- • Cross-check font size values between HTML email and web stylesheets
Component Library Documentation
- • Document component font sizes in both EM and % for a broader audience
- • Build a type scale reference table for the design system style guide
- • Verify scaling behavior of components at different percentage sizes
Accessibility Auditing
- • Confirm that EM-based font sizes meet WCAG minimum size requirements in %
- • Check that small EM values translate to readable percentage sizes
- • Report font sizes as percentages in accessibility audit reports
Learning & Teaching CSS
- • Illustrate the 1:100 equivalence of EM and percent for CSS beginners
- • Demonstrate EM compounding in nested elements visually with the live preview
- • Build intuition for relative units with instant conversion feedback
Frequently Asked Questions
What is the formula to convert EM to percent?
Multiply by 100: % = em × 100. Because both EM and percent reference the parent element's font size, the ratio is always constant — 1.5em = 150%, regardless of what the parent font size actually is.
Are EM and percent the same for font-size?
Yes, for the font-size property they are equivalent — both reference the parent element's font size. 1em = 100%, 1.5em = 150%. They behave differently for other CSS properties, where EM references the element's own font size.
Do I need to know the parent font size to convert EM to percent?
No. The EM-to-percent conversion is always % = em × 100 and does not depend on any font size. You only need the parent size if you want to see the resulting pixel value.
How does EM compounding work?
If a parent has font-size: 1.5em and a child also has font-size: 1.5em, the child computes to 1.5 × 1.5 = 2.25× the ancestor's size. This is why REM is often preferred for global typography — it always references the root and never compounds.
When should I use EM instead of REM?
Use EM for self-contained components (buttons, badges, tooltips) where you want all sizing — font, padding, border-radius — to scale together relative to the component's own font size. Use REM for global typography to keep sizes consistent regardless of nesting depth.
How do I convert percent back to EM?
Divide by 100: em = % ÷ 100. Use the swap button in this tool to reverse direction instantly.
Is my data safe? Does this tool send data to a server?
No data leaves your browser. All calculations happen entirely client-side using JavaScript. Nothing you enter is uploaded or stored anywhere.
What is the difference between EM and REM?
EM is relative to the nearest parent element's font size and compounds when nested. REM (Root EM) always references the root html element's font size, making it predictable at any depth. For a consistent global type scale, REM is the better choice.