Quick Answer
How do you convert PX to EM/REM?
For font-size, divide by the inherited font size to convert pixels to em. For other properties, use the element’s computed font size. Convert to rem using the root font size; the tool provides separate inherited and root inputs.
Understanding CSS Units: PX, EM, and REM
CSS offers several units for sizing elements, with pixels (px), em, and rem being the most commonly used. Pixels provide absolute sizing, while em and rem offer relative sizing that scales based on font size. Understanding when to use each unit is essential for creating responsive, accessible websites that work well across different devices and user preferences.
On font-size, em is relative to the inherited font size. On other properties it uses the element’s computed font size. rem uses the root font size; relative units can scale with font settings.
Using relative units like em and rem instead of fixed pixel values makes your website more accessible. When users adjust their browser's default font size, content sized with relative units will scale appropriately, improving readability for users with visual impairments. Modern responsive design best practices recommend using rem for most sizing needs.
The converter below helps you quickly convert between these units. Simply enter a pixel value and your base font size to see the equivalent em and rem values. Most browsers use a default font size of 16px, but always consider that users may change this setting.
Unit Converter
Common PX to EM/REM Conversions
| Pixels | EM (base 16px) | REM (base 16px) | Percentage |
|---|---|---|---|
| 8px | 0.5em | 0.5rem | 50% |
| 10px | 0.625em | 0.625rem | 62.5% |
| 12px | 0.75em | 0.75rem | 75% |
| 14px | 0.875em | 0.875rem | 87.5% |
| 16px | 1em | 1rem | 100% |
| 18px | 1.125em | 1.125rem | 112.5% |
| 20px | 1.25em | 1.25rem | 125% |
| 24px | 1.5em | 1.5rem | 150% |
| 28px | 1.75em | 1.75rem | 175% |
| 32px | 2em | 2rem | 200% |
| 36px | 2.25em | 2.25rem | 225% |
| 40px | 2.5em | 2.5rem | 250% |
| 48px | 3em | 3rem | 300% |
| 64px | 4em | 4rem | 400% |
Understanding CSS Units
PX (Pixels)
A CSS pixel is a reference unit and need not equal one physical screen pixel. Device pixel ratio and browser zoom affect its physical display size.
EM
For font-size, em uses the inherited font size; on other properties it uses the element’s computed font size.
REM (Root EM)
Relative unit based on the font-size of the root element (html). 1rem equals the root font-size. Does not compound when nested.
% (Percentage)
Relative unit based on the parent element's value. 100% equals the parent's value.