1. Enter a value
Type a number in the input field. You can use a period or comma as the decimal separator.
Convert EM to pixels
Convert CSS em units to pixels based on your base font size. Enter a value and the result appears instantly.
Loading tool editor...
When do you need to convert em to px?
The CSS em unit is relative to the font size of the parent element. If the parent font size is 16px (browser default), then 1em = 16px, 1.5em = 24px, 2em = 32px.
Em units are commonly used in responsive web design for typography, spacing, and layout. Converting to pixels helps understand the actual rendered size.
Unlike rem (which is relative to root), em compounds: if a parent is 1.5em and a child is 1.5em, the child renders at 1.5 × 1.5 = 2.25× the base size.
All calculations run locally in your browser — nothing is sent to any server.
How to use the converter?
2. Read the result
The conversion result appears instantly in the field next to it – no clicking required.3. Copy or reverse
Click Copy result or use the Reverse button to convert in the opposite direction.
When is this converter useful?
Typography
Line-height 1.5 em = 150% of the parent font size.Buttons
Padding in em scales with the button's text size.Components
Proportional dimensions relative to text in UI components.CSS media queries
Breakpoints in em are resilient to base font-size changes.
What makes this converter different?
Complete privacy
All calculations run locally in your browser. No data is sent to any server.Real-time results
The result updates instantly as you type – no need to click any button.Bidirectional conversion
The Reverse button lets you convert in both directions with one click.Reference table
A ready-made table with commonly converted values and contextual descriptions.
How does em to px conversion work?
px = em × parent font size. By default, the browser base font size is 16px.
Em compounds through the DOM tree. If body is 16px and a div is 1.5em (24px), a paragraph inside at 1.5em will be 1.5 × 24 = 36px.
For predictable sizing, consider using rem units instead — they always reference the root element font size.
Practical tips
- Default browser font: 16px. 1em = 16px, 0.875em = 14px, 1.25em = 20px.
- Common heading sizes: h1 = 2em (32px), h2 = 1.5em (24px), h3 = 1.17em (18.7px).
- Padding/margin in em scales with font size — useful for responsive components.
- 62.5% trick: setting html font-size to 62.5% makes 1em = 10px for easier math.
em vs px vs rem
| Feature | em | px |
|---|---|---|
| Reference | Parent font size | Fixed pixel |
| Compounds | Yes (nests) | No |
| Responsive | Yes | No |
| Accessibility | Respects user settings | Fixed size |
| Predictability | Context-dependent | Always consistent |
em
- Reference
Parent font size - Compounds
Yes (nests) - Responsive
Yes - Accessibility
Respects user settings - Predictability
Context-dependent
px
- Reference
Fixed pixel - Compounds
No - Responsive
No - Accessibility
Fixed size - Predictability
Always consistent
Convert other units to px
Explore other unit converters
Frequently asked questions
Help us improve our tools
Have an idea, found a bug, or want to suggest a feature? Drop us a message – we respond within 24 hours.