EM to PX Converter
Convert between EM and PX units with customizable base font size
Live Font Size Preview
Hello
Conversion Reference
1 unit equals how many pixels
px
1
pixels
em
16
pixels
CSS Style Properties
Pixels (px)
h1 {
font-size: 1px;
}Em (em)
h1 {
font-size: 1em;
}About EM to PX Conversion
What is EM?
EM (em) is a relative CSS unit that is based on the font size of the parent element. It's useful for creating scalable, responsive designs that adapt to parent font sizes and user preferences.
What is PX?
PX (Pixels) is an absolute unit that represents a fixed size on the screen. It doesn't scale with user preferences or parent elements, making it useful for precise measurements.
The Conversion Formula
1 EM = Base Font Size (default 16px)
If you change your base font size to 20px, then 1 EM = 20px.
Unit Conversion Table for EM to PX
| EM | Pixel |
|---|---|
| 0.5em | 8px |
| 0.6em | 9.6px |
| 0.7em | 11.2px |
| 0.8em | 12.8px |
| 0.9em | 14.4px |
| 1.0em | 16px |
| 1.1em | 17.6px |
| 1.2em | 19.2px |
| 1.3em | 20.8px |
| 1.4em | 22.4px |
| 1.5em | 24px |
| 1.6em | 25.6px |
| 1.7em | 27.2px |
| 1.8em | 28.8px |
| 1.9em | 30.4px |
| 2.0em | 32px |
| 2.1em | 33.6px |
| 2.2em | 35.2px |
| 2.3em | 36.8px |
| 2.4em | 38.4px |
| 2.5em | 40px |
How to Use the EM to PX Converter
- 1
Enter your value
Type the EM (or px) value you want to convert into the "From Value" input field.
- 2
Select the unit direction
Choose em or px in both dropdowns. Use the swap button to reverse direction instantly.
- 3
Adjust the base font size if needed
Click Show Settings to change the base font size. Default is 16px (the browser standard). Change this to match your CSS context.
- 4
Read the result and copy
The converted value appears instantly in the "To Value" field. Click the Copy button 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 conversion table in the About section lists common EM values for quick reference.
Tip: At the default 16px base, 1em = 16px, 1.5em = 24px, 2em = 32px. Change the base font size to instantly recalculate all values for your project.
Common Use Cases
Responsive Typography
- • Convert a designer's px font size spec to EM for scalable text
- • Verify that a heading at 2em matches the expected pixel size
- • Calculate EM values for a fluid type scale across breakpoints
CSS Framework Customisation
- • Map a design system's px token values to EM equivalents
- • Migrate a legacy px-based stylesheet to scalable EM units
- • Set a custom base font size and recalculate all component values
Accessibility Improvements
- • Convert fixed px font sizes to EM so they scale with user preferences
- • Audit component sizes to ensure they respect browser zoom
- • Convert WCAG-recommended minimum sizes from px to EM values
Component Spacing & Layout
- • Convert padding and margin values from px designs to EM for scalable components
- • Calculate line-height values in EM from pixel mockups
- • Set
letter-spacingandword-spacingin EM from px specs
Media Query Conversion
- • Convert px breakpoints to EM for more accessible media queries
- • EM-based media queries respect user browser font size preferences
- • Calculate
@media (min-width: 48em)from a 768px design breakpoint
Learning & Teaching CSS
- • Understand how EM relates to px for CSS fundamentals
- • Demonstrate how changing the base font size affects all EM values
- • Use the live preview to show students visual font size differences instantly
Frequently Asked Questions
What is the formula to convert EM to PX?
The formula is: px = em × baseFontSize. With the default 16px base, 1em = 16px, 1.5em = 24px, 2em = 32px. Use the Settings panel to change the base for your specific CSS context.
What is the default base font size for EM?
Most browsers default the root font size to 16px. 1em in a child element equals the font size of its nearest parent — which is often 16px unless overridden. You can change the base font size in the Settings panel to match your actual CSS.
What is the difference between EM and REM?
EM is relative to the font size of the nearest parent element, which can compound with nesting (e.g. 1.2em inside another 1.2em = 1.44× the root). REM always references the root html element, staying consistent regardless of nesting depth.
When should I use EM instead of PX?
Use EM when you want an element to scale relative to its parent's font size — useful for component-level spacing, padding, and typography. Use PX for precise, fixed measurements like borders or icon sizes that should never scale.
How do I convert PX back to EM?
Use the swap button in this tool, or apply the reverse formula: em = px ÷ baseFontSize. For example, 24px ÷ 16 = 1.5em. This is the most common direction — converting a px design spec to scalable EM values.
Why use EM for media queries?
EM-based media queries scale with the user's browser font size setting, making them more accessible than px-based queries. For example, @media (min-width: 48em) triggers at 768px by default but adjusts if the user has increased their base font size.
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.
Does changing the base font size affect the conversion table?
Yes. The conversion table in the About section recalculates dynamically based on your base font size setting. If you set the base to 20px, all EM values in the table will show their 20px-based pixel equivalents.