The em is a flexible CSS length unit for sizing text. Instead of locking everyone to pixels, it scales with the font size supplied by the browser, the user, or the element’s context. section 14.7 section 7.11
Let the reader choose the scale
If the relevant default font size is 16px, 1.5em becomes 24px and 3em becomes 48px. If the default is 24px, those same values become 36px and 72px. section 14.7
Keep these three ideas in mind:
- em is relative, so it respects changes users make to their browser’s default text size. section 14.7 section 7.11
- The font-size property inherits. An em value on a child is therefore calculated from the size established by its context, not always directly from the browser default. section 14.7
- Do not confuse the em unit with the HTML em element, which emphasizes text. section 7.11
body {
font-size: 1em;
}
header {
font-size: 1.5em;
}
h1 {
font-size: 2em;
}
Try the body, header, and h1 rules together, then follow how inherited font sizes affect nested em values. section 14.7
A useful takeaway: use relative typography when the page should adapt to different readers and screens, while remembering that nested em values can grow through inheritance. section 14.7 section 7.11
