Easily turn your CSS EM values into percentages (%) for responsive web design. Enter your EM value below to get the exact percentage equivalent instantly.
What are EM and Percentage Units?
When building modern, responsive websites, you need layout units that can grow or shrink depending on the screen size. Two of the most popular relative units are EM and Percentage (%).
What is an EM Unit?
An em is a unit that depends on the font size of the parent element (the container it sits inside).
- If a container has a font size of
16px, then1eminside that container equals16px. - If the container’s font size changes to
20px,1emautomatically becomes20px.
Why Use Percentages?
In CSS typography, percentages work exactly like EM units when you apply them to text. Setting text to 1em is the exact same as setting it to 100%. Developers often convert EMs to percentages to make their stylesheets easier to read or to match a specific team style guide.
How to Convert EM to Percentage
Converting EM to a percentage is very simple. Because 1 EM is equal to 100%, you just multiply your EM value by 100.
The Formula:
Percentage (%) = EM Value × 100
- Example 1: If your design calls for
1.5em, the calculation is: 1.5 × 100 = 150% - Example 2: If you have small text set to
0.85em, the calculation is: 0.85 × 100 = 85%
Quick Conversion Table
Here is a handy reference table for the most common text sizes used in web design:
| EM Value | Percentage (%) | Common Web Use Case |
| 0.5 em | 50% | Small captions and fine print |
| 0.75 em | 75% | Secondary text and tooltips |
| 1.0 em | 100% | Standard body text (default size) |
| 1.25 em | 125% | Small subheadings (H3 or H4) |
| 1.5 em | 150% | Medium headings (H2) |
| 2.0 em | 200% | Main page titles (H1) |
| 3.0 em | 300% | Large hero section text |
Tools for Your Responsive Workflow
Managing different CSS units can get confusing when layouts get large. If you ever need to reverse your calculations, you can easily switch back using our Percent to EM Converter.
When turning a static design mockup into functional code, you will often need to compare these relative values against fixed pixel sizes. To do this quickly, pair this page with our EM to PX Converter or convert raw pixel layouts directly using the PX to EM Converter.
Finally, if your project relies on global root-level scaling instead of parent container scaling, you can keep your layout consistent across all screens by using our REM to Percent Converter.
Frequently Asked Questions
Is there any difference between 1em and 100% for text sizing?
No. When you are styling text size (font-size), 1em and 100% do the exact same thing. Both inherit the text size of the parent container. The only difference is how you prefer to write your code.
Do EMs and Percentages work the same way for margins and padding?
No, they behave differently here. If you set a layout’s width to 100%, it takes up the entire width of its parent container. But if you set the width to 1em, the width will only equal the font size of that specific element. EMs scale with text size, while percentages scale with the size of the container box.
What does “compounding” mean with EM units?
EM units multiply when you nest elements inside one another. For example, if a parent container has a text size of 1.5em (150%) and you put a paragraph inside it that is also set to 1.5em (150%), the paragraph’s actual size multiplies to 2.25em (225%). Percentages do the exact same thing when nested.
Does the user’s browser settings affect this conversion?
No. The conversion rule itself never changes: 1 EM always equals 100%. Whether a user changes their default browser font size to large or small, the proportional scale between EM and percentage stays exactly the same.