Font Sizing & Spacing

font-size sets the size of the glyphs. The unit you pick decides what it is relative to: px is fixed, rem is relative to the root element, and em or % are relative to the parent element's font-size (and compound when nested).

line-height sets the height of each line box. The unitless form like 1.5 is a multiplier: each line is 1.5 times the element's own font-size. The form 1.5em or 150% is computed once at the element where it is set and then inherited as a fixed pixel value.

letter-spacing adds (or removes, if negative) space between every character. word-spacing does the same but only between words. Both inherit and both take a length relative to the element's own font-size when you use em.

Long body copy at line-height: 1 is hard to read because the eye loses its place between lines. Bumping to 1.5 gives the eye a clear gap to track, which is why WCAG Success Criterion 1.4.12 asks for at least 1.5 on body text. The unitless form keeps that gap proportional no matter what font-size a child uses.

letter-spacing and word-spacing are how you tune a headline from default system spacing into something that looks set by a designer. Tightening a large headline by letter-spacing: -0.02em removes the optical gaps caps leave, and loosening small uppercase labels by 0.1em makes them legible.

Knowing that em and % compound through nesting is what stops a component from blowing up when it gets dropped inside a larger text context. rem for sizes and unitless multipliers for line-height are the predictable defaults for exactly this reason.

**font-size units:** px (fixed, 16px is the browser default), rem (relative to the root, scales with user font-size preference), em and % (relative to the parent, compounds when nested), and keywords like small / medium / large. For most component sizing, rem is the safe pick because it never compounds.

**line-height:** prefer the UNITLESS form. line-height: 1.5 is inherited as a multiplier, so a child with font-size: 2rem gets a 3rem line box automatically. line-height: 1.5em computes to a fixed pixel value at the parent and is inherited as that fixed number, which breaks proportional spacing in any child whose font-size differs.

**letter-spacing:** takes a length, usually in em so it scales with the font. letter-spacing: -0.02em tightens a headline, 0.1em loosens a small uppercase label. It applies to every character including the last one in a word, which is why a small negative value on tightly-set caps often looks better than none.

**word-spacing:** adds space between words, not characters. Useful for justified text or small uppercase labels. Inherited, and em is relative to the element's own font-size.

**The font shorthand:** font: italic 700 1.25rem/1.5 \"Inter\", sans-serif; sets style, weight, size, line-height, and family in one declaration. Size and family are required and must be in that order, with line-height after a slash right after the size. Forgetting any sub-property in the shorthand RESETS it to the initial value, so font: 1rem \"Inter\"; silently sets line-height: normal even if you set 1.5 elsewhere.