Styling text

Most of a website is words, so most of design is typography.

Choosing a font

font-family takes a list, and the browser uses the first one it has:

font-family: Georgia, serif;

Always end with a generic (serif, sans-serif, monospace) as a fallback. system-ui uses whatever the reader’s operating system uses, which loads instantly and always looks native.

Size and spacing

• font-size ~ use rem so it respects the reader’s settings.
• line-height ~ use a unitless number, like 1.5. With a unit it gets inherited as a fixed value and wrecks anything with a different font size.
• letter-spacing ~ tighten big headings slightly (-0.02em), loosen small caps.

The single most useful line

max-width: 60ch;

Long lines of text are exhausting to read. Capping your measure at around 60–75 characters does more for a page than any font ever will.

Extras worth knowing

• text-wrap: balance evens out the lines of a heading.
• text-transform: uppercase shouts in CSS instead of in your HTML ~ so screen readers still read real words.
• text-underline-offset and text-decoration-thickness turn the default underline into something you’d actually choose.