PX to EM Converter
CSS lets you size things in pixels (px), em, rem, and other units. em and rem scale with font size — useful for responsive typography.
The conversion rule
If the root font size is 16 px (the browser default), then 1rem = 16px. em is relative to the parent's font size rather than the root.
Quick conversion table (16 px base)
| px | rem | em |
|---|---|---|
| 8 px | 0.5 rem | 0.5 em |
| 10 px | 0.625 rem | 0.625 em |
| 12 px | 0.75 rem | 0.75 em |
| 14 px | 0.875 rem | 0.875 em |
| 16 px | 1 rem | 1 em |
| 18 px | 1.125 rem | 1.125 em |
| 20 px | 1.25 rem | 1.25 em |
| 24 px | 1.5 rem | 1.5 em |
| 32 px | 2 rem | 2 em |
| 48 px | 3 rem | 3 em |
| 64 px | 4 rem | 4 em |
When to use which
| Unit | Use for |
|---|---|
px | Borders, fine details that shouldn't scale. |
rem | Font sizes, padding, margins — scales with the user's preferred font size. |
em | Spacing inside a component that should scale with its own font size. |
Formula: rem value = px value ÷ root font size. With the default 16 px root, divide by 16.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>PX to EM Converter</title>
</head>
<body>
<h1>PX to EM Converter</h1>
<p>This is a demo page for the "PX to EM Converter" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
At the default 16px root font-size, how many pixels is 1em?
1em =
px
Two digits. Same as the default root size.
Discussion
Loading…