EM to PX Converter
Convert em units to pixels with precision for your CSS projects
Popular EM to PX Conversions
This table shows the most commonly used em to pixel conversions based on the standard 16px base font size in web development.
| EM Value | Pixels (16px base) | Pixels (14px base) | Pixels (18px base) |
|---|---|---|---|
| 0.25em | 4px | 3.5px | 4.5px |
| 0.5em | 8px | 7px | 9px |
| 0.75em | 12px | 10.5px | 13.5px |
| 1em | 16px | 14px | 18px |
| 1.25em | 20px | 17.5px | 22.5px |
| 1.5em | 24px | 21px | 27px |
| 1.75em | 28px | 24.5px | 31.5px |
| 2em | 32px | 28px | 36px |
| 2.5em | 40px | 35px | 45px |
| 3em | 48px | 42px | 54px |
| 4em | 64px | 56px | 72px |
| 5em | 80px | 70px | 90px |
Conversion Formula and Steps
Basic Formula
de>Pixels (px) = EM Value × Base Font Size (px)Step-by-Step Conversion Process
- Identify the em value you need to convert (e.g., 2em)
- Determine the base font size of the parent element (typically 16px by default)
- Multiply the em value by the base font size
- The result is your pixel value (e.g., 2 × 16 = 32px)
Worked Examples
Example 1: Standard Conversion
Given: 1.5em with 16px base font size
Calculation: 1.5 × 16 = 24px
Result: 1.5em equals 24 pixels
Example 2: Larger Base Size
Given: 2em with 20px base font size
Calculation: 2 × 20 = 40px
Result: 2em equals 40 pixels
Example 3: Decimal Values
Given: 0.875em with 16px base font size
Calculation: 0.875 × 16 = 14px
Result: 0.875em equals 14 pixels
What Are EM Units?
The em unit is a relative length measurement in CSS that scales based on the font size of its parent element. Unlike absolute units such as pixels, em values adapt proportionally, making them particularly valuable for creating flexible, scalable web designs.
Key Characteristics
Relative Sizing
Em units inherit and scale based on the parent element’s font size, creating a cascading effect throughout the document hierarchy.
Compounding Behaviour
When nested elements use em, the values compound. A child element set to 1.5em inside a parent with 1.2em results in a compounded scale.
Default Base Value
Most browsers default to 16px as the base font size, meaning 1em typically equals 16 pixels unless explicitly changed.
EM vs PX Comparison
| Aspect | EM Units | Pixel Units |
|---|---|---|
| Type | Relative unit | Absolute unit |
| Scalability | Scales with parent font size | Fixed size regardless of context |
| Accessibility | Respects user font preferences | Ignores user font settings |
| Consistency | Varies based on inheritance | Consistent across contexts |
| Best For | Typography, spacing, modular components | Borders, shadows, fixed-size elements |
| Browser Control | Users can adjust via browser settings | No user override capability |
Pro Tip: Combining em for typography and spacing with pixels for borders and fixed elements creates a balanced approach that maximises both flexibility and precision in web design.
When to Convert EM to PX
Design Specification Matching
Design mockups and style guides often specify dimensions in pixels. Converting em values to pixels helps verify that your code matches the intended design specifications precisely.
Cross-Browser Debugging
Different browsers may render em units slightly differently depending on their default settings. Converting to pixels during debugging helps identify discrepancies and maintain consistency across platforms.
Fixed Layout Requirements
Certain elements such as navigation bars, buttons, or icons may require exact pixel dimensions to align with grid systems or maintain specific proportions regardless of user settings.
Third-Party Integration
When integrating external libraries, widgets, or content management systems that expect pixel values, conversion becomes necessary to ensure proper display and functionality.
Base Font Size Context
The base font size serves as the foundation for all em calculations. This value can be set at various levels in your CSS hierarchy.
Common Base Sizes
| Base Size | Context | 1em Equals | 2em Equals |
|---|---|---|---|
| 12px | Small text, captions | 12px | 24px |
| 14px | Compact interfaces | 14px | 28px |
| 16px | Standard web content | 16px | 32px |
| 18px | Enhanced readability | 18px | 36px |
| 20px | Large displays, accessibility | 20px | 40px |
Nested Element Calculations
Em units compound when elements are nested, which can create unexpected results if not properly accounted for.
Nested EM Formula
de>Final PX = Parent EM × Child EM × Root Base SizeNesting Example
Structure: Root (16px) → Parent (1.5em) → Child (1.2em)
Parent Size: 16px × 1.5 = 24px
Child Size: 24px × 1.2 = 28.8px
Result: The child element renders at 28.8 pixels
Important: This compounding behaviour is why many developers prefer rem units (root em) for more predictable sizing, as rem always references the root font size rather than the parent element.
Browser Default Settings
Web browsers ship with default font sizes that directly impact how em units are rendered when no explicit base size is set.
Standard Browser Defaults
Chrome & Edge
Default: 16px
Users can adjust this in Settings → Appearance → Font size
Firefox
Default: 16px
Adjustable through Options → Language and Appearance → Fonts
Safari
Default: 16px
Modifiable via Preferences → Appearance → Default font size
When users change their browser font size, all em-based elements scale proportionally, whereas pixel-based elements remain fixed. This makes em units more accessible for users with visual impairments who need larger text.
Frequently Asked Questions
What is the difference between em and rem units?
Em units are relative to the parent element’s font size, whilst rem (root em) units are always relative to the root HTML element’s font size. Rem provides more predictable scaling without the compounding effect of nested em values.
Should I use em or px for font sizes?
Em units are generally preferred for font sizes because they scale with user preferences and browser settings, improving accessibility. Pixels are better suited for elements that require fixed dimensions such as borders or icons.
How do I prevent em units from compounding in nested elements?
To avoid compounding, either use rem units instead of em, or explicitly set font sizes on nested elements. Alternatively, establish a clear sizing system at your component level rather than deeply nesting em values.
What happens if I don’t specify a base font size?
The browser will use its default base font size, which is typically 16px. This means 1em will equal 16px by default in most browsers unless the user has customised their browser settings.
Can I use em for properties other than font size?
Yes, em units work for any CSS property that accepts length values, including padding, margin, width, height, and border-radius. The value is always calculated based on the element’s font size.
How do em units affect media queries?
Media queries using em units are calculated relative to the browser’s default font size (usually 16px), not the current element’s font size. This makes them consistent and predictable for responsive breakpoints.
Are decimal em values recommended?
Decimal em values (such as 1.25em or 0.875em) are perfectly valid and commonly used for fine-tuned typography scales. They allow for more precise control over relative sizing whilst maintaining scalability.
Does converting to pixels reduce accessibility?
Converting em to pixels for reference is fine, but hardcoding all sizes in pixels can reduce accessibility because fixed pixel values don’t respond to user font size preferences. Maintain em or rem in your production code where appropriate.