Convert pixels to EM units quickly and accurately. Enter a pixel value and the reference font size to calculate the equivalent EM value for your CSS.
Enter your pixel value and the font size used as the EM reference.
To convert pixels to EM, divide the pixel value by the reference font size. The reference font size is usually the font size of the element or its parent element, depending on the CSS property being used.
For example, if the reference font size is 16px, a value of 32px is equal to 2em.
These examples use a 16px reference font size. Your actual EM value may differ when a different reference font size is used.
| Pixels | EM | Common Example |
|---|---|---|
| 4px | 0.25em | Small spacing |
| 8px | 0.5em | Small spacing |
| 12px | 0.75em | Small text / spacing |
| 16px | 1em | Base font size |
| 20px | 1.25em | Text / spacing |
| 24px | 1.5em | Heading / spacing |
| 32px | 2em | Large text / spacing |
| 40px | 2.5em | Section spacing |
| 48px | 3em | Large heading |
| 64px | 4em | Large spacing |
EM is a relative CSS unit that is based on a font-size reference. Unlike pixels, which represent a fixed CSS length, EM values can change when the relevant font size changes.
For example, if an element has a font size of 16px, then 1em is equivalent to 16px for that element. A value of 2em would be equivalent to 32px.
EM is especially useful when you want dimensions, spacing, or typography to scale with the surrounding text.
One of the important characteristics of EM is that its reference can depend on the element where the value is being applied. This means that nested elements can produce different results as font sizes are inherited or changed.
For example, consider a parent element with a font size of 20px. If a child element uses 1.5em for its font size, the resulting font size would be 30px.
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em;
}
In this example, 1.5em × 20px = 30px. This relative behavior is one reason EM can be useful for component-based designs.
EM can be useful when an element's size or spacing should respond to its local typography rather than the root font size.
EM can be used for text sizes when you want typography to scale relative to the surrounding font size.
Padding, margins, and gaps can use EM when spacing should scale along with a component's typography.
EM can help create reusable components where dimensions respond to changes in the component's font size.
EM and REM are both relative CSS units, but they use different references. EM can be influenced by the font size of the current element or its parent, while REM is based on the root HTML element's font size.
| Feature | EM | REM |
|---|---|---|
| Type | Relative unit | Relative unit |
| Primary reference | Local font-size context | Root HTML font size |
| Can compound when nested | Yes | Generally no |
| Useful for | Component-level scaling | Global scaling |
PX provides a fixed CSS length, while EM is a relative unit that responds to its font-size context. Choosing between them depends on how you want your design to scale.
| Feature | PX | EM |
|---|---|---|
| Unit type | Fixed CSS length | Relative unit |
| Depends on font size | No | Yes |
| Scales with typography | No | Yes |
| Best suited for | Precise fixed dimensions | Scalable components |
Divide the pixel value by the reference font size. For example, 32px ÷ 16px = 2em.
With a 16px reference font size, 16px equals 1em.
With a 16px reference font size, 24px equals 1.5em.
With a 16px reference font size, 32px equals 2em.
No. 1em depends on the relevant font-size context. If the reference font size is 20px, then 1em is equivalent to 20px in that context.
The basic formula is: EM = PX ÷ Reference Font Size.
EM is relative to the local font-size context, while REM is based on the font size of the root HTML element. EM can therefore be affected by nested font-size values.
Use Pixel Converters to convert pixels, EM, REM, viewport units, and other common web design measurements.
Explore All Converters →