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.
Frequently Asked Questions
What is 1em in pixels?
By default (with a 16px base font size), 1em = 16px. If the parent element has a different font size, 1em equals that size. For example, if the parent is 20px, then 1em = 20px.
What is the difference between EM and REM?
EM is relative to the parent element font size and can compound in nested elements. REM is always relative to the root (html) font size, making it more predictable. Most developers prefer REM for consistent sizing.
What is the default browser font size?
The default font size in all major browsers is 16px. This is the base for REM calculations unless you change the html font-size in your CSS.
Should I use PX or REM?
Use REM for font sizes and spacing to respect user accessibility settings (browser zoom). Use PX for borders, shadows, and tiny details. Never use PX for text if accessibility matters.
What is PT used for?
PT (points) is a print unit where 1pt = 1/72 of an inch. In CSS, 1pt = 1.333px. Use PT only in print stylesheets (@media print).