CSS Text und Typography
CSS Text und Typography
Schriften, Größen, Gewichtung, Zeilenhöhe, Textausrichtung und Lesbarkeit. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- lesbare Textgestaltung umsetzen
- wichtige Text-Eigenschaften anwenden
- responsive Schrift ohne extremes Skalieren planen
Erklärung
Typografie entscheidet stark über Verständlichkeit. Gute Webtexte brauchen passende Schriftfamilien, ausreichende Zeilenhöhe, klare Hierarchie und genug Kontrast.
letter-spacing sollte vorsichtig eingesetzt werden. Negative Werte verschlechtern oft die Lesbarkeit. Für Fließtext ist line-height meist wichtiger als dekorative Effekte.
Beispiele
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}
h1 {
font-size: 2rem;
line-height: 1.2;
}
Systemschriften laden schnell und wirken auf vielen Geräten vertraut.
.muted {
color: #64748b;
text-decoration: none;
}
Textfarbe und Dekoration beeinflussen, wie wichtig ein Text wirkt.
Typische Fehler
- Zu kleine Schrift auf mobilen Geräten.
- Blocksatz im Web erzwingen und große Wortlücken erzeugen.
- Linkunterstreichungen entfernen, ohne andere Erkennbarkeit zu schaffen.
Best Practices
- Nutze mindestens gut lesbare Basisschriftgrößen.
- Halte Zeilenlängen begrenzt.
- Prüfe Textkontraste und Fokuszustände.
Kleine Übung
Gestalte eine Artikelseite mit h1, h2, Absätzen, Links und einer kleinen Hinweisbox typografisch lesbar.
Zusammenfassung
CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026