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 px – CSS converter with custom font-size
em compounds through the DOM tree — so the rendered px depends on context. Set your base size and see the result instantly.
ADVERTISEMENT
ADVERTISEMENT
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 scaling
When you set a paragraph to 1.5em inside a div that is already 1.25em, the text renders at 1.875× the root size — this compound effect trips up developers regularly. Use this converter to see the final pixel value at any nesting level.Button and component padding
Padding defined in em scales automatically with the button's own font size. A button at 0.875em with padding 0.5em gets 7px padding — not 8px. Verify exact pixel sizing before final QA.CSS media queries in em
Bootstrap 5 breakpoints are defined in rem, but many older frameworks and custom setups use em for media queries. A breakpoint at 48em equals 768px only if the root is untouched — this tool confirms the correct threshold.Accessibility and WCAG 1.4.4
WCAG Success Criterion 1.4.4 requires text to resize up to 200% without loss of content. em-based font sizes honor the user's browser font preference, while px-based sizes ignore it. Verify your em values translate to accessible minimums.
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.
ADVERTISEMENT
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 Pixels
Explore other unit converters
Frequently asked questions
How many pixels is 1em?
By default, 1em = 16px (browser default font size). But em is relative to the parent element font size, so it changes based on context. If a parent div has font-size: 20px, then 1em inside it equals 20px, not 16px.
What is the difference between em and rem?
em is relative to the parent element font size and compounds through DOM nesting. rem is always relative to the root (html) element font size and never compounds. For predictable spacing systems, rem is usually preferred.
When should I use em instead of rem or px?
Use em when you want a component to scale proportionally with its own font size — for example, button padding, icon sizes within text, or line-height. Use rem for global spacing. Use px for borders and box-shadows that should stay fixed.
What is the 62.5% trick?
Set html { font-size: 62.5% } to make 1rem/1em = 10px at the root level. Then 1.6rem = 16px, 2rem = 20px — easier mental math. Note: this affects em values too, so nested em calculations change accordingly.
Are Bootstrap breakpoints in em or px?
Bootstrap 5 media queries use em units internally. sm = 36em (576px), md = 48em (768px), lg = 62em (992px), xl = 75em (1200px), xxl = 96em (1400px) — all at 16px root.
How does browser zoom affect em-based layouts?
When users zoom in using the browser, em-based font sizes scale correctly because the root font size scales proportionally. px-based layouts can break or overflow, which is why em and rem are recommended for accessible typography.
Does Sass support em calculations?
Yes. In Sass you can store base font sizes as variables and calculate em values: $base: 16px; font-size: #{14px / $base}em. Some teams also use the em() function in their own Sass utilities to automate the conversion.
Are calculations done locally?
Yes. All calculations run in your browser. No data is sent to any server.
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.