EM to PX Converter
Convert between EM, PX, REM, and PT CSS units instantly. Set your base font size and see all conversions at once with a live text preview. Free tool for web developers.
The quick brown fox jumps over the lazy dog. (Preview at computed size)
Reference Table (Base: 16px)
| PX | EM/REM | PT |
|---|---|---|
| 10px | 0.625 | 7.5pt |
| 12px | 0.75 | 9pt |
| 14px | 0.875 | 10.5pt |
| 16px | 1 | 12pt |
| 18px | 1.125 | 13.5pt |
| 20px | 1.25 | 15pt |
| 24px | 1.5 | 18pt |
| 32px | 2 | 24pt |
| 48px | 3 | 36pt |
How EM to PX Conversion Works
In CSS, EM and REM are relative units. 1em equals the font size of the parent element, while 1rem equals the font size of the root element (usually 16px). PX (pixels) is an absolute unit. PT (points) is used in print. This converter handles all four with a configurable base size.
Conversion Formulas (Base: 16px)
EM to PX: px = em × base font size
PX to EM: em = px ÷ base font size
PX to PT: pt = px × 0.75
1em = 1rem = 16px = 12pt (at default base)
EM vs REM in CSS
EM is relative to the parent element's font size, which can cause compounding issues in nested elements. REM is always relative to the root (html) element, making it more predictable. Modern CSS best practice favors REM for font sizes and EM for padding/margins that should scale with local text size.
When to Use PX vs EM vs REM
Use PX for borders, shadows, and fine details that should not scale. Use REM for font sizes, spacing, and layout dimensions for consistent scaling. Use EM for padding and margins within components that need to scale with their own font size. Use PT only for print stylesheets.
EM to PX Converter for Accessibility
Using relative units (EM, REM) instead of fixed PX for font sizes is a key accessibility practice. When users increase their browser's default font size — a common accessibility setting for visually impaired users — REM-based text scales proportionally, while PX-based text stays fixed. The Web Content Accessibility Guidelines (WCAG) recommend relative units for text sizing to ensure content remains readable for all users regardless of their browser settings.
Common EM to PX Conversions
With the default 16px base: 0.5em = 8px, 0.75em = 12px, 0.875em = 14px, 1em = 16px, 1.125em = 18px, 1.25em = 20px, 1.5em = 24px, 2em = 32px, 2.5em = 40px, 3em = 48px. If your project uses a different base (like 10px for easier math with the 62.5% trick), all conversions change accordingly — this converter handles any base size automatically.