The rem unit is a CSS relative length equal to the computed font size of the root element. Browsers convert it to pixels before rendering, so 1rem equals the root font size in pixels. section 3.1.1
Use rem to keep sizing predictable across a design:
- Resolve rem values to pixels when checking layout math. section 3.1.6
- Prefer rem for font sizes when nested em values would compound through inheritance. section 3.4.5 section 3.4.4
- Combine rem with viewport units and calc() or clamp() when text must scale while retaining minimum and maximum limits. section 8.2.4 section 8.2.2
Avoiding nested heading growth
If the root font size is 16px, h2 { font-size: 2rem; } renders every h2 at 32px. An equivalent 2em declaration can produce different sizes because each nested parent changes the current font size. section 3.4.5 section 3.4.4
Constrained fluid typography
For hero text that should range from 4rem at 320px wide to 8rem at 1600px, use font-size: clamp(4rem, 2rem + 5vw, 8rem);. The rem values establish the bounds while 5vw supplies viewport-based growth. section 8.2.4 section 8.2.2
Listing 3.1 Converting measurements to pixel values
font-size: 16px;
font-size: 1rem; #1
font-size: 100%; #2
font-size: 12pt; #3
font-size: 0.166667in; #4
Compare equivalent font-size declarations and see which values resolve to the same pixel size. section 3.1.1
