PX to EM Converter
Calculate EM values from pixels based on parent font size context
Safe conversion with no data sent to server
Reference Table
| Pixels (px) | Rem | Em |
|---|---|---|
| 1px | 0.0625rem | 0.0625em |
| 2px | 0.125rem | 0.125em |
| 4px | 0.25rem | 0.25em |
| 8px | 0.5rem | 0.5em |
| 10px | 0.625rem | 0.625em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 32px | 2rem | 2em |
| 48px | 3rem | 3em |
| 64px | 4rem | 4em |
What is EM in CSS?
The EM unit is relative to the font-size of its immediate or nearest parent element. If a parent container has a font-size of 20px, then 1em inside that container equals 20px. If that element then sets its own font-size to 2em (now 40px), any margins or paddings on that element specified in ems will be relative to 40px.
PX vs REM vs EM
While PX is absolute, REM and EM are relative. REM is relative to the root (`<html>`) font size, making it highly predictable globally. EM is relative to its direct parent, which is incredibly useful for modular components (like a button where the padding scales up proportionally if you change its base font size), but can lead to complex compounding math when nested deeply.