Font Size and Weight

A customer raises the default text size in their browser settings because small print is hard for them to read. On a site sized in rem, every heading and paragraph grows with that setting. On a site that fixes text in pixels, the setting is ignored. Size units are an accessibility decision, not just a matter of taste.

The rule

Size text in rem; weight it with numbers from 100 to 900.

font-size accepts several units:

• px: a fixed size. Predictable, but it does not grow when the user raises the browser's default text size.
• rem: relative to the root (html) font size, which is 16px by default and follows the user's setting. 1.5rem is 24px at the default.
• em: relative to the parent's font size. Useful for things that should scale with their surroundings, but it compounds when nested.
• %: for font-size, relative to the parent, like em (150% = 1.5em).

font-weight takes numbers in steps of 100 from 100 (thin) to 900 (black). normal is 400 and bold is 700. The keywords bolder and lighter step relative to the parent.

A weight only looks right if the font has it. If you load Lora at 400 and 700 only, asking for 600 gives you the nearest available weight, and asking for bold from a font with no bold file makes the browser fake one by smearing the glyphs.

The shortcut

Think in multiples of 16. At the default root, rem × 16 = pixels. For em, multiply by the parent's size, not the root's.

The em trap: nest three lists each set to 0.8em and the innermost text is 0.8 × 0.8 × 0.8 of the outer size, about half. rem never compounds.

Drills

Answer fast — trust the rule.

Remember

• rem follows the root (16px by default); em follows the parent.
• Weights run 100 to 900; normal is 400, bold is 700, if the font has them.
• em compounds when nested; rem never does.