Zum Inhalt springen
KodeTrail

Camp 2 · Schritt 5 von 13

Typography

Font families, size, weight, and line height — the four properties that make or break readability.

14 Min.+50 XPAuf Englisch angezeigt — Übersetzung ist unterwegs

Most of the web is text, so most of design is typography. Four properties do the heavy lifting.

font-family: choosing the typeface

CSS
Live-Vorschau

The comma list is a font stack: the browser tries each in order and falls back gracefully. Always end with a generic family (serif, sans-serif, monospace) as the safety net.

Size, weight, style

CSS
Live-Vorschau
  • font-size — prefer rem units (relative to the user's base size; more in the next lesson)
  • font-weight400 is normal, 700 bold; variable fonts offer the whole 100–900 range
  • font-stylenormal or italic

line-height: the invisible hero

CSS
Live-Vorschau

A unitless line-height between 1.5 and 1.8 is the sweet spot for body text. It's the highest-impact, least-known readability fix in CSS.

Checkpoint

In font-family: "Fira Sans", Arial, sans-serif; — what is sans-serif doing?

Checkpoint

Body text feels cramped and hard to read. The first property to reach for is:

What's next

px, rem, em, and % — what the units actually mean and which to use where.