Typography & Readability

Most of the web is text. Typography is not decoration; it is the difference between a page people read and a page they flee.

Font stacks

body {
  font-family: Georgia, "Times New Roman", serif;
}

A font stack is a fallback list: the browser uses Georgia if installed, otherwise Times New Roman, otherwise any serif. Always end with a generic family (serif, sans-serif, monospace). Multi-word names go in quotes.

Most sites use the system fonts already on the device — they load instantly and look native:

font-family: system-ui, sans-serif;

Loading custom fonts from files is a real technique (later concern — and it costs bandwidth and a flash of fallback text).

Size and line-height

body {
  font-size: 1rem;
  line-height: 1.6;
}

Line-height as a bare number (not px!) means "1.6 × the font size" — and it scales if the size changes. Dense single-spaced text is the most common amateur tell; 1.5–1.7 is comfortable for body text.

Line length

Reading research is blunt: 45–75 characters per line, ~66 ideal. On a desktop, a full-width paragraph is 120+ characters — eyes lose the line when jumping back. Later, the layout module gives you the tools to cap content width; until then, note that wide paragraphs are a layout problem, not a font-size problem.

Weight, style, decoration

• font-weight: bold (or 700) / normal (400).
• font-style: italic.
• text-decoration: underline — and the beginner rule that matters: links should look like links. Removing link underlines is acceptable only if something else (color + weight) clearly distinguishes them; color alone fails contrast-sensitive and color-blind users.

Aligning

text-align: left; /* default for LTR text */

Leave body text left-aligned: fully-justified text creates "rivers" of white space that punish dyslexic readers hardest. Centered text is for headings and short lines.

What you learned

• Font stacks end in a generic family; system-ui is the fast default
• line-height as a unitless number; 1.5–1.7 for body text
• 45–75 characters per line; width control comes with layout
• Links stay visually distinct; body text stays left-aligned

Next: the box model — how CSS measures every element.