Both scale with text size, but from different starting points.
Direct answer
rem is based on the root (html) font size, so it is consistent everywhere. em is based on the element's own font size, so nested elements can compound. Use rem for most sizing and em for things that should scale with their own text, such as button padding.
Example
html { font-size: 100%; } /* 16px by default */
h1 { font-size: 2rem; } /* 32px */
.button {
font-size: 1rem;
padding: 0.5em 1em; /* scales with the button's text */
}
The compounding trap
ul { font-size: 1.2em; }
ul ul { font-size: 1.2em; } /* now 1.44 times the base */
Rule of thumb
| Use | For |
|---|---|
rem | font sizes, spacing, layout |
em | component padding that follows its text |
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Default to rem, reach for em on purpose.
