Die Web-Typografie-Checkliste

Öffne eine Seite, die du dieses Jahr veröffentlicht hast, und bewerte sie anhand der zwanzig Checks unten. Die meisten Seiten fallen bei fünf oder mehr durch. Ein typisches Audit liest sich so: Basisgröße 15px, Zeilenhöhe im Fließtext 1,3, Zeilen mit neunzig Zeichen, drei Schriftfamilien, gerade Anführungszeichen, elf Schriftdateien. Das sind sechs Durchfaller, noch bevor es an die Details geht — und keiner davon war eine Entscheidung. Es waren Voreinstellungen, die niemand überschrieben hat.

Eine Web-Typografie-Checkliste ist ein ausführbares Audit: zwanzig einzeilige Checks in fünf Gruppen — Grundlagen, Lesen, Schriften, Details, Auslieferung — jeder mit einer konkreten Zahl zum Abgleichen. Typografie scheitert selten an einem großen Fehler; sie scheitert an angesammelten kleinen Voreinstellungen, und eine Checkliste fängt das ab, wonach das Urteilsvermögen zu suchen vergisst. Dieser Artikel schließt unseren Typografie-Guide ab, indem er seine Regeln zu einer Liste verdichtet, die du in zwanzig Minuten durchgehen kannst.

Eine nützliche Analogie kommt aus der Luftfahrt: Piloten arbeiten Checklisten ab, nicht weil ein einzelner Punkt schwierig wäre, sondern weil Routine dazu verleitet, triviale Punkte zu überspringen — und die daraus folgenden Fehler sehen aus wie Pech. Jeder Check unten ist für sich genommen trivial. Die Summe ist das Handwerk.

Sind die Grundlagen gelegt?

1. Basisgröße ist 16px oder mehr. Fließtext ab 16px — kleinere Basiswerte lassen jede nachgelagerte Zahl gegen den Leser arbeiten.
2. Jede Größe stammt aus einer Skala. Jede Schriftgröße ergibt sich aus Basis × Verhältnisⁿ — keine verwaisten 15px- oder 22px-Werte, die zu nichts gehören.
3. Größen in rem, nicht px. Text skaliert mit, wenn ein Leser seine Browser-Standardgröße erhöht; px überschreibt diese Wahl klammheimlich.
4. Zeilenhöhen landen auf einer Grundlinien-Einheit. Jede Zeilenhöhe ist ein Vielfaches von 4 oder 8px — 16/24, 21/28, 28/36 — damit der vertikale Rhythmus das Stapeln übersteht.

Liest sich der Fließtext angenehm?

5. Die Zeilenlänge liegt bei 45–75 Zeichen pro Zeile. Zähl eine echte Zeile aus; ~66 ist die oft genannte angenehme Mitte.
6. Die Zeilenhöhe im Fließtext liegt bei etwa 1,5. 24px bei 16px-Text; enger passt zu Überschriften, nicht zu Absätzen.
7. Absatzabstand ist größer als Zeilenabstand. Der Abstand zwischen Absätzen muss deutlich größer wirken als der Abstand zwischen Zeilen.
8. Der Kontrast im Fließtext beträgt mindestens 4,5:1. Der WCAG-AA-Wert für normal große Schrift — miss ihn, schätz ihn nicht.

Halten die Schriftarten stand?

9. Höchstens zwei Familien. Eine für Display, eine für Text — eine dritte braucht einen schriftlichen Grund.
10. Die Gewichte der Hierarchie liegen zwei Stufen auseinander. 400 gegen 600 liest sich als Struktur; 400 gegen 500 liest sich als Rendering-Fehler bei gleicher Größe.
11. Display-Schriften erscheinen nur in Display-Größen. Kontrastreiche oder dekorative Schriften bleiben oberhalb von etwa 28px, wo ihre Details überleben.
12. Verwechselbare Zeichen werden getestet. Il1 und rn/m bei der kleinsten Größe geprüft, die du auslieferst.

Öffne ein System, das diese ersten drei Gruppen besteht — eine aus der Skala abgeleitete Hierarchie mit Zeilenhöhen auf einem 8px-Grundlinienraster, zwei Familien und Gewichten zwei Stufen auseinander, gezeigt in lebendigem Mustertext. Es ist das Referenzbild: Dein Audit ist ein Diff dagegen.

Stimmen die Details?

13. Die Laufweite folgt der Größe. Enger bei Display (−0,01 bis −0,02em), null im Fließtext, weiter bei Versalien und kleinen Labels (+0,02 bis +0,08em).
14. Anführungszeichen sind echt. Typografische „ “ und ’ — das gerade ” ist ein Überbleibsel der Schreibmaschine, keine Typografie.
15. Kein Fake-Fett oder -Kursiv. Nur Schnitte und Stile, die die Dateien tatsächlich mitbringen; den Rest fälschen Browser, indem sie Konturen verschmieren oder schräg stellen.
16. Lauftext beherrscht seinen Flattersatz. Silbentrennung in schmalen Spalten, keine Gießbäche im Blocksatz, keine Ein-Wort-Schlusszeilen in Überschriften.

Ist die Auslieferung sauber?

17. Nur WOFF2 über die Leitung. Jeder aktuelle Browser liest es; nichts anderes ist seine Bytes wert.
18. font-display: swap ist gesetzt. Text erscheint sofort in einer Fallback-Schrift, statt unsichtbar aufzublitzen.
19. Vier Schriftdateien oder weniger. Jede Familie × Gewicht × Stil ist eine Datei; eine Seite, die mehr braucht, hat meist ein Hierarchie-Problem, kein Schrift-Problem.
20. Die Fallback-Schrift passt grob. Eine System-Schrift als Fallback, metrisch abgestimmt mit size-adjust, wo dein Tooling es erlaubt, damit der Wechsel die Seite kaum verschiebt.

Was machst du mit dem Ergebnis?

Bring zuerst die Grundlagen in Ordnung, denn sie ziehen Kreise: Größen auf eine Skala zu setzen behebt verwaiste Werte, an der Grundlinie ausgerichtete Zeilenhöhen reparieren den Rhythmus, und beides schrumpft die Gruppen Schriften und Auslieferung von allein — eine Seite mit echter Hierarchie braucht selten eine dritte Familie oder eine elfte Datei. Die Detail-Gruppe kommt aus gutem Grund zuletzt: echte Anführungszeichen auf einer 90-Zeichen-Zeile sind Politur an einem Problem.

Für die Begründung speziell hinter den Details ist Matthew Buttericks Practical Typography eine breit empfohlene Referenz — die meisten dieser Checks verdichten Argumente, die dort und anderswo in Buchlänge ausgeführt werden.

Mach das Audit dann konkret statt bloß gedanklich. Bau die Zahlen deiner Seite in Scale Composer nach — setze deine tatsächliche Basis und dein Verhältnis, weise deine Gewichte und Zeilenhöhen zu und vergleiche das Ergebnis mit dem, was du veröffentlicht hast. Jeder Check, den das nachgebaute System besteht und deine Seite nicht, ist eine einzeilige Korrektur, die du benennen kannst — und genau darum geht es bei einer Checkliste.