Typografie II
Größen, Gewichte, Zeilenhöhe
Vom Bauchgefühl zum System: Wie du mit einer festen Type Scale, durchdachter Zeilenhöhe und kontrollierten Zeilenlängen Texte erstellst, die tatsächlich angenehm zu lesen sind.
- Eine Type Scale definieren und erklären, warum lineare Skalen nicht funktionieren
- Zeilenhöhe (line-height) proportional zur Schriftgröße und Zeilenlänge einsetzen
- Die optimale Zeilenlänge (45–75 Zeichen) kennen und im Code umsetzen
- Schriftgröße und Font Weight gemeinsam als Hierarchie-System verstehen
- Häufige typografische Fehler in bestehenden UIs erkennen und benennen
Kerngedanke
Typografie braucht ein System, keine Einzelentscheidungen
Jedes Mal neu zu entscheiden, ob ein Text 13px oder 14px groß sein soll, kostet Zeit und führt zu inkonsistenten Ergebnissen. Eine vordefinierte Type Scale mit 6–8 Stufen macht jede Entscheidung schneller und das Ergebnis konsistenter.
Lesbarkeit ist messbar — keine reine Frage des Geschmacks
Optimale Zeilenlänge, passende Zeilenhöhe und richtige Schriftgrößen folgen nachvollziehbaren Regeln. Diese Regeln kann man lernen und direkt im Code umsetzen — ohne jahrelange Designerfahrung.
Theorie — Type Scale
Eine Schriftgrößen-Skala definieren
Die meisten UIs ohne festes System verwenden bis zu 15 verschiedene Schriftgrößen — jede aus dem Moment heraus entschieden. Das Ergebnis ist visuelle Inkonsistenz, die man nicht sofort benennen kann, aber deutlich spürt. Eine Type Scale begrenzt die Auswahl auf 6–8 sinnvolle Stufen. Statt jedes Mal zu überlegen nimmst du einfach die nächste passende Stufe aus deiner Skala.
Der Unterschied zwischen 12px und 16px (33%) ist enorm. Der Unterschied zwischen 48px und 52px (8%) kaum sichtbar. Eine gute Skala hat relative Abstände — klein eng, groß weit.
Für UI-Arbeit sind px-Werte einfacher zu kommunizieren und zu debuggen. rem ist für Accessibility sinnvoll (Browser-Zoom). Definiere dein System in px, konvertiere bei Bedarf.
Definiere deine Type Scale am Anfang eines Projekts. Wenn du eine neue Schriftgröße brauchst, die nicht in der Skala ist, ist das ein Signal — entweder passt die Skala noch nicht, oder die Entscheidung lässt sich mit einer vorhandenen Größe lösen.
Theorie — Zeilenhöhe & Zeilenlänge
Lesbarkeit durch Proportionen
Zwei Parameter haben mehr Einfluss auf die Lesbarkeit von Fließtext als die Schriftgröße selbst: die Zeilenhöhe (line-height) und die Zeilenlänge. Beide lassen sich mit einfachen Regeln steuern.
Kleiner Text braucht mehr Zeilenabstand — das Auge findet sonst die nächste Zeile nicht leicht.
Standard-Fließtext. 1.5 ist das absolute Minimum für angenehme Lesbarkeit.
Titel brauchen engen Abstand — sonst wirken sie fragmentiert.
Warum ist Zeilenlänge so wichtig?
Zu lange Zeilen zwingen das Auge zu einer langen horizontalen Bewegung zurück zum Zeilenanfang. Dabei verliert man leicht die Zeile. Zu kurze Zeilen unterbrechen den Lesefluss durch ständige Umbrüche.
Optimale Breite: 45–75 Zeichen pro Zeile
Das entspricht je nach Schrift ca. 20–35em oder 480–680px bei 14–16px. Die einfachste Lösung: max-width: 65ch auf dem Text-Container setzen — ch ist die Breite des Zeichens „0".
Zeilenlänge und line-height sind proportional
Breite Spalten brauchen mehr Zeilenabstand (bis 2.0) damit das Auge die nächste Zeile findet. Schmale Spalten (Seitenleisten, Karten) können mit 1.4–1.5 auskommen.
Setze max-width: 65ch auf alle Paragraphen, die mehr als zwei Zeilen haben. Das ist die schnellste Einzelmaßnahme für bessere Lesbarkeit.
Vergleichsbeispiel 1 von 4
Willkürliche Größen vs. Type Scale
Ohne feste Skala entstehen Layouts mit vielen ähnlichen, aber nie identischen Schriftgrößen. Das Ergebnis fühlt sich inkonsistent an — ohne dass man genau sagen kann warum. Eine Type Scale erzeugt eine spürbare Ruhe und Konsistenz, selbst wenn Außenstehende das System nicht kennen.
Im Vorher-Beispiel gibt es sechs verschiedene Schriftgrößen — 22, 14, 13, 12, 11 und 10px. Die Abstände zwischen benachbarten Größen (13→12→11→10) sind so klein, dass sie kaum hierarchische Wirkung haben. Das Auge findet keinen klaren Einstiegspunkt.
Im Nachher-Beispiel wurden bewusst weniger Größen mit größeren Abständen gewählt. Die Hierarchie ist sofort spürbar: 24px Titel, 13px Beschreibung, 10px-Mono-Label, 15px-Wert, 11px-Meta. Jede Stufe hat eine klar andere optische Wirkung.
Benachbarte Stufen in einer Type Scale sollten mindestens 25% Größenunterschied haben, damit sie klar unterschiedlich wahrgenommen werden. 13px und 14px sind für das Auge praktisch identisch — verwende sie nicht beide.
Vergleichsbeispiele 2 + 3 von 4
Zeilenhöhe und Zeilenlänge in der Praxis
Zwei häufige Lesbarkeitsprobleme, die sich mit je einer CSS-Zeile lösen lassen.
Bei zu engem Zeilenabstand verliert das Auge schnell den Faden. Die Zeilen fließen optisch ineinander und man liest dieselbe Zeile aus Versehen zweimal — oder springt eine über.
Mit ausreichend Zeilenabstand findet das Auge mühelos die nächste Zeile. Der Text wirkt luftiger, bleibt aber trotzdem als zusammengehöriger Block lesbar.
Wenn ein Paragraph die volle Container-Breite ausfüllt, werden die Zeilen zu lang. Das Auge muss nach jeder Zeile einen langen Weg zurück zum Zeilenanfang machen und verliert dabei leicht den Anschluss an die nächste Zeile.
Mit begrenzter Zeilenlänge liegt die optimale Zeichen-Anzahl im Bereich von 45–75. Der Rücksprung zum Zeilenanfang ist kurz genug, um die nächste Zeile sicher zu finden.
Zeilenhöhe: 1.2 ist der Browser-Default für viele Elemente — gut für Überschriften, aber zu eng für Fließtext. 1.5–1.7 ist für Body Text der richtige Bereich. Die Änderung ist minimal im Code, aber massiv in der Wahrnehmung.
Zeilenlänge: Die ch-Einheit in CSS bezieht sich auf die Breite des „0"-Zeichens der aktuellen Schrift — damit skaliert max-width: 65ch automatisch mit der Schriftgröße mit.
Drei Defaultwerte, die du in jedem Projekt setzen solltest: Fließtext bekommt line-height: 1.6, Titel bekommen line-height: 1.2, und Paragraphen bekommen max-width: 65ch.
Vergleichsbeispiel 4 von 4
Baseline-Ausrichtung und Letter-Spacing
Zwei weniger bekannte Details, die polierte UIs von durchschnittlichen unterscheiden: die Ausrichtung gemischter Schriftgrößen an der Baseline, und gezieltes Letter-Spacing für Monospace-Labels.
Bei vertikaler Zentrierung gemischter Schriftgrößen wirken die Texte optisch „schwebend" und instabil — besonders wenn die Größendifferenz groß ist. Baseline-Ausrichtung verbindet die Texte auf der unsichtbaren Grundlinie, auf der Buchstaben natürlich ruhen. Das Ergebnis wirkt ruhiger und zusammengehöriger.
Eine Zeile CSS: align-items: baseline statt align-items: center. Einer der seltenen Fälle wo weniger wirklich mehr ist.
Wenn du in einer Zeile zwei Texte mit unterschiedlichen Schriftgrößen nebeneinander hast (z.B. Zahl + Einheit, Titel + Datum), nutze align-items: baseline. Das ist fast immer besser als center.
Praxisaufgabe
Typografisches System für einen Artikel-Header
Aufgabenstellung
Du bekommst einen Artikel-Header mit mehreren typografischen Problemen: willkürliche Schriftgrößen außerhalb einer Skala, zu enge Zeilenhöhe im Fließtext, zu breite Textblöcke und falsch ausgerichtete gemischte Schriftgrößen. Verbessere den Header durch gezielte Änderungen — ohne das HTML-Markup zu verändern.
- Bringe alle Schriftgrößen auf Werte aus der gelernten Type Scale (11 / 13 / 15 / 19 / 24 / 32px)
- Setze die Zeilenhöhe des Fließtexts auf einen lesbaren Wert (1.6–1.7)
- Begrenze die Textbreite des Intro-Absatzes mit max-width: 65ch
- Richte Autor-Name und Datum mit align-items: baseline aus
- Bonus: Füge dem Kategorie-Label letter-spacing: 1.5px hinzu und vergleiche die Wirkung
Startcode — Zum Kopieren und Verbessern
Öffne diesen Code im Browser und wende die Type Scale, korrekte Zeilenhöhen und Zeilenlängen-Begrenzung an. Die TODO-Kommentare zeigen dir genau, wo Anpassungsbedarf besteht.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typografie II — Aufgabe Modul 11</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* Type Scale (nur diese Größen verwenden!):
32px — Page Title (font-weight: 800)
24px — Section Title (font-weight: 700)
19px — Card Title (font-weight: 700)
15px — Subtitle/Lead (font-weight: 500)
13px — Body Text (font-weight: 400)
11px — Small/Meta (font-weight: 400)
10px — Label/Badge (font-mono, weight: 600)
Zeilenhöhen:
Titel: line-height: 1.15 – 1.25
Fließtext: line-height: 1.6 – 1.7
Paragraphen: max-width: 65ch
*/
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
background: #f4f4f8;
display: flex; align-items: center;
justify-content: center; min-height: 100vh; padding: 32px;
--text-primary: #12121e; --text-secondary: #52526e;
--text-tertiary: #9090aa; --accent: #0ea5a0;
--bg-surface: #ffffff; --bg-elevated: #eeeef4;
--accent-dim: rgba(14,165,160,0.08);
--accent-border: rgba(14,165,160,0.22);
}
</style>
</head>
<body>
<div style="background:#fff; border-radius:16px; padding:28px; width:580px;">
<!-- TODO: Skala-Größe? + letter-spacing testen -->
<div style="font-size:11px; font-weight:600; color:var(--accent);
text-transform:uppercase; margin-bottom:8px;">Engineering</div>
<!-- TODO: Richtige Skala-Größe + line-height für Titel -->
<div style="font-size:27px; font-weight:800; line-height:1.5;
color:var(--text-primary); margin-bottom:10px;">
Wie wir unsere Build-Zeit um 60% reduziert haben
</div>
<!-- TODO: line-height + max-width anpassen -->
<div style="font-size:14px; line-height:1.3;
color:var(--text-secondary); margin-bottom:12px;">
In diesem Post beschreiben wir den vollständigen Prozess,
wie unser Team die CI/CD-Pipeline schrittweise optimiert hat
— von der Analyse der Bottlenecks bis zu den messbaren
Ergebnissen nach drei Monaten intensiver Arbeit.
</div>
<!-- TODO: align-items: center → baseline -->
<div style="display:flex; align-items:center; gap:10px;">
<div style="width:28px; height:28px; border-radius:50%;
background:var(--accent-dim); border:1px solid var(--accent-border);
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:600; color:var(--accent);
flex-shrink:0;">TK</div>
<!-- TODO: Welche Skala-Größe passt für den Autor-Namen? -->
<span style="font-size:16px; font-weight:600;
color:var(--text-primary);">Thomas Klein</span>
<span style="font-size:10px; color:var(--text-tertiary);">
· 12. März 2025 · 8 min Lesezeit
</span>
</div>
</div>
</body>
</html>