| EM | PX | Common Use |
|---|---|---|
| 0.25em | 4.0px | Very small spacing |
| 0.5em | 8.0px | Small spacing |
| 0.75em | 12.0px | Small text |
| 1em | 16.0px | Base size |
| 1.125em | 18.0px | H6 heading |
| 1.25em | 20.0px | H5 heading |
| 1.5em | 24.0px | H4 heading |
| 1.75em | 28.0px | H3 heading |
| 2em | 32.0px | H2 heading |
| 2.5em | 40.0px | H1 heading |
| 3em | 48.0px | Large heading |
| 4em | 64.0px | Extra large |
- EM: Relative unit based on the parent element's font size
- PX: Absolute unit representing screen pixels
- Base size: The root font size (typically 16px in browsers)
- Formula: em × base size = px | px ÷ base size = em
- EM units are responsive and scale with user font size preferences
How to convert em and px
- Set the base font size. Use 16 for the browser default, or the computed font size of the parent element.
- Type an em value to get pixels, or a px value to get em. Typing in one box clears the other.
- Use the Common Conversions table for quick lookups at the current base size.
Example: a 24px heading inside an 18px article
With the default 16px base, 24px ÷ 16px = 1.5em. If the heading sits inside an article with font-size: 18px, the same 1.5em renders at 27px, because em on font-size is relative to the parent. To get exactly 24px there, set the base to 18: 24 ÷ 18 = 1.3333em.
.article { font-size: 18px; }
.article h2 { font-size: 1.5em; } /* 27px */
.article h3 { font-size: 1.3333em; } /* 24px */Frequently asked questions
How many pixels is 1em?
16px in all major browsers at default settings. It changes if the user picks a different default font size, or if a parent element sets its own font size.
Should I use em or rem?
rem is always relative to the root (html) font size, so 1.5rem is the same size everywhere on the page. em is relative to the parent and compounds when elements are nested. rem is the safer default for font sizes and layout spacing; em suits values that should scale with their own text, like padding on a button.
Can I use this for rem?
Yes. Set the base to your root font size (16 unless you changed the html font-size) and read the em result as rem.
Why doesn't 1em of padding match the parent's font size?
On properties other than font-size, em is relative to the element's own font size. A button with font-size: 14px and padding: 1em gets 14px of padding, whatever its parent's size is.
Why does my text get smaller in nested lists?
Each nested element multiplies by its parent. A ul with font-size: 0.9em inside another such ul ends up at 0.9 × 0.9 = 0.81 of the outer size. Switching to rem stops the compounding.