Text comes in all sizes — headings big and bold, footnotes tiny and discreet. CSS gives you several ways to control that.
Pixels (px)
Pixels are the most straightforward unit. One pixel equals one dot on the screen. Easy to understand, easy to use:
h1 { font-size: 32px; }
p { font-size: 16px; }
small { font-size: 12px; }The downside with pixels is they do not scale. If a user changes their browser's default font size, pixel-sized text stays put. That can be a problem for accessibility.
Ems (em)
One em equals the font size of the parent element. If the parent is 16px, then 1em is 16px, 2em is 32px, and 0.5em is 8px.
.parent { font-size: 16px; }
.child { font-size: 1.5em; } /* 24px */The tricky part about ems is they compound. A div inside a div inside a div can quickly spiral out of control.
Rems (rem)
rem stands for "root em." It always refers to the root element's font size (the <html> tag), not the parent. No compounding, no surprises.
html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
h2 { font-size: 1.5rem; } /* 24px */Rems are the modern favorite for typography. They respect user preferences and do not compound.
Percentages
Percentages work like ems — they are relative to the parent. If the parent is 16px, 150% is 24px.
p { font-size: 100%; } /* same as parent */
h1 { font-size: 200%; } /* twice the parent */Percentages are less common for font sizes these days, but you will still see them in older code.