rem

1rem is the font-size of the html element, the root of the page. By default that is 16px, and a reader who raises the default size in the browser settings changes it for every rem on the page at once. So rem is the unit for type and spacing that should respect the reader: one setting scales the whole design, and a stylesheet that never touches the root size gets it for free.

Two details catch people out. In the root element’s own font-size, rem cannot refer to itself, so it reads the browser’s initial value instead: html { font-size: 2rem } gives 32px at the default size and 48px when the reader’s default is 24px. And in a media query rem behaves like em: it means the initial size and ignores whatever your CSS sets on html.

Two root sizes were measured with the reader’s default raised to 24px. html { font-size: 62.5% }, the old trick that makes 1rem 10px for easier arithmetic, gave 15px: a percentage is taken of the reader’s default, so the setting survives. The cost moves elsewhere: a body rule has to set the text size again, and every rem on the site reads as tenths. html { font-size: 16px } gave 16px: the pixel value replaces the reader’s default instead of scaling it, and the setting is gone for every rem on the page.