Typografie ist im Web zu 90 Prozent Handwerk mit messbaren Werten. Wer Schriftgröße, Zeilenlänge, Zeilenabstand und Kontrast in vernünftigen Bereichen hält, hat lesbaren Text. Der Rest, also die Wahl der Schrift, ist der sichtbare, aber kleinere Teil der Wirkung.
Die vier Werte
Schriftgröße
| Element | Empfehlung |
|---|---|
| Fließtext | 16 bis 19 Pixel, längere Texte am oberen Ende |
| Einleitungsabsatz | 18 bis 21 Pixel |
| H1 | 32 bis 56 Pixel je nach Layout |
| H2 | 24 bis 32 Pixel |
| H3 | 18 bis 22 Pixel |
| Beschriftungen, Hinweise | 13 bis 14 Pixel, nicht darunter |
16 Pixel sind die Untergrenze, nicht das Ziel. Wer Texte mit 14 Pixel setzt, weil es eleganter wirkt, verliert Leser, die zoomen müssen oder aufgeben.
Wichtig ist außerdem: Größen in relativen Einheiten angeben, damit eine im Browser eingestellte größere Grundschrift respektiert wird. Wer alles in Pixel festnagelt, hebt diese Einstellung aus.
Zeilenlänge
45 bis 80 Zeichen pro Zeile, Optimum um 65. Umgesetzt wird das über eine Maximalbreite des Textblocks, praktisch etwa 640 bis 760 Pixel bei üblichen Schriftgrößen.
Das ist der Punkt, an dem die meisten Seiten scheitern: Ein Fließtext ohne Breitenbegrenzung läuft auf einem 27-Zoll-Bildschirm über 150 Zeichen, und das Auge verliert beim Zeilenwechsel den Anschluss. Es fühlt sich anstrengend an, ohne dass der Leser benennen kann, warum.
Zeilenabstand
1,5 bis 1,7 der Schriftgröße für Fließtext. Bei 17 Pixel Schriftgröße sind das 25 bis 29 Pixel Zeilenhöhe.
Für Überschriften gilt das Gegenteil: 1,0 bis 1,2. Große Schrift mit weitem Zeilenabstand fällt auseinander. Je größer die Schrift, desto enger der Zeilenabstand.
Und: Zeilenlänge und Zeilenabstand hängen zusammen. Längere Zeilen brauchen mehr Abstand, damit der Zeilensprung gelingt.
Kontrast
Mindestens 4,5 zu 1 für Fließtext, 3 zu 1 für Schrift ab etwa 24 Pixel oder ab 19 Pixel in Fettschnitt. Diese Werte sind seit dem BFSG für viele Anbieter nicht mehr Empfehlung, sondern Pflicht.
Hellgraue Schrift auf Weiß ist die häufigste Verletzung im gesamten Web. Grau wirkt ruhig, aber ein Grauwert wie #999999 auf Weiß erreicht nur etwa 2,8 zu 1. Wer Ruhe will, nimmt einen dunkleren Grauton mit leichter Farbneigung. Siehe Kontraste prüfen.
Schriftwahl
Zwei Schriften genügen. Eine für Überschriften, eine für Fließtext. Als Fließtextschrift eignen sich Schriften mit großer x-Höhe, offenen Formen und unterscheidbaren Zeichen. Der kritische Test ist immer derselbe: Sind großes I, kleines l und Ziffer 1 unterscheidbar? Sind 0 und O unterscheidbar?
Schnitte begrenzen. Regular, Semibold und gegebenenfalls Italic reichen für die meisten Projekte. Jeder zusätzliche Schnitt ist eine zusätzliche Datei.
Lokal ausliefern. Schriften von einem fremden Server zu laden bedeutet, dass bei jedem Aufruf Daten an Dritte übertragen werden, was datenschutzrechtlich zu behandeln ist, und es kostet Ladezeit. Siehe Webfonts optimieren und Google Fonts lokal.
Ersatzschrift abstimmen. Bis die Webfont geladen ist, zeigt der Browser eine Ersatzschrift. Haben beide sehr unterschiedliche Maße, springt das Layout beim Wechsel, was den CLS-Wert verschlechtert. Siehe Core Web Vitals.
Hierarchie mit Typografie
Eine Seite braucht sichtbare Ebenen, und dafür genügen drei bis vier:
- H1, einmal pro Seite, deutlich größter Text
- H2 für Hauptabschnitte, klar kleiner als H1, klar größer als Fließtext
- H3 für Unterabschnitte, nur wenn tatsächlich gegliedert wird
- Fließtext als Basis
Die Abstände zwischen den Ebenen sollten deutlich sein. H2 mit 22 Pixel neben Fließtext mit 20 Pixel wirkt wie ein Versehen. Ein Verhältnis von etwa 1,3 bis 1,5 zwischen den Ebenen ist ein guter Ausgangspunkt.
Überschriftenebenen folgen der Gliederung, nicht der Optik. Wer eine H3 wählt, weil sie kleiner aussieht, zerstört die Struktur für Hilfsmittel und Suchmaschinen. Wenn eine H2 zu groß aussieht, wird sie kleiner gestaltet, nicht durch eine H3 ersetzt.
Abstände um Text
Der Abstand über einer Überschrift muss größer sein als der darunter. Sonst wirkt die Überschrift, als gehöre sie zum vorherigen Abschnitt. Ein bewährtes Verhältnis: über der Überschrift etwa das Doppelte des Abstands darunter.
Absätze werden entweder durch Abstand oder durch Einzug getrennt, nicht durch beides. Im Web ist Abstand die übliche Wahl.
Die sechs häufigsten Fehler
- Fließtext unter 16 Pixel. Der Klassiker, oft aus einem Entwurf übernommen, der am großen Bildschirm entstand.
- Zeilen über 90 Zeichen, weil keine Maximalbreite gesetzt wurde.
- Zu wenig Zeilenabstand, meist der Standardwert des Browsers, der für Fließtext zu eng ist.
- Zu heller Grauton, unter 4,5 zu 1 Kontrast.
- Text in Blocksatz ohne Silbentrennung. Erzeugt Lücken im Satz, im Deutschen mit langen Wörtern besonders auffällig.
- Text in Bildern. Nicht skalierbar, nicht vorlesbar, nicht durchsuchbar. Betrifft besonders Preislisten und Öffnungszeiten.
Wer diese sechs Punkte prüft, hat den größten Teil der typografischen Probleme einer Website erledigt. Wie Typografie mit Raster und Abständen zusammenwirkt, steht in Layout und Raster.