Eine Website verkauft in Textform: Headline, Nutzenargumente, Preisdetails, Button-Beschriftung. Jede Hürde beim Lesen ist eine Hürde vor dem Klick. Die Forschung nennt das kognitive Flüssigkeit: Was leicht zu verarbeiten ist, wirkt glaubwürdiger und vertrauenswürdiger — was anstrengt, wird übersprungen. Typografie ist damit kein Dekorationsthema, sondern die Infrastruktur jeder Conversion.
Die drei Grundwerte: Größe, Zeilenhöhe, Zeilenlänge
Lesbarkeit entsteht nicht durch eine schöne Schrift, sondern durch drei Werte, die zusammenspielen müssen. Sie sind messbar und in zehn Minuten geprüft:
- Schriftgröße: 16 Pixel sind das Minimum für Fließtext, 17 bis 19 Pixel sind auf inhaltslastigen Seiten besser. Alles unter 14 Pixel zwingt mobile Nutzer zum Zoomen — und Zoomen ist ein Absprunggrund
- Zeilenhöhe: 1,5 bis 1,8 der Schriftgröße. Zu eng gesetzter Text verschwimmt, zu weiter zerfällt in Einzelzeilen
- Zeilenlänge: 45 bis 75 Zeichen pro Zeile. Läuft Text über die volle Desktop-Breite, entstehen 150-Zeichen-Zeilen, in denen das Auge den Zeilenanfang verliert — deshalb begrenzen gute Layouts die Textspalte auf etwa 700 bis 800 Pixel
Diese Werte sind keine Stilfrage, sondern Ergonomie. Ein Text mit denselben Worten konvertiert unterschiedlich, je nachdem ob er in 13 Pixel über die volle Breite läuft oder in 17 Pixel in einer sauberen Spalte steht.
Hierarchie: Besucher scannen, bevor sie lesen
Eye-Tracking-Studien zeigen seit Jahren dasselbe Muster: Besucher lesen Websites nicht Wort für Wort, sondern scannen Headlines, Zwischenüberschriften und hervorgehobene Begriffe. Typografische Hierarchie ist die Landkarte für dieses Scannen. Sie braucht klare Abstufung: Die H1 deutlich größer als die H2, die H2 deutlich größer als der Fließtext — als Faustregel jeweils Faktor 1,5 bis 2. Wenn sich Überschrift und Fließtext nur um zwei Pixel unterscheiden, gibt es keine Hierarchie, sondern nur graue Fläche. Dazu gehört Disziplin bei Hervorhebungen: Fettdruck für die drei Begriffe, die hängen bleiben sollen — nicht für halbe Absätze.
Kontrast: das unterschätzte Conversion-Leck
Hellgrauer Text auf weißem Grund sieht in der Design-Präsentation elegant aus und ist im Zug auf dem Handy unlesbar. Die WCAG fordert ein Kontrastverhältnis von mindestens 4,5:1 für Fließtext — seit dem BFSG ist das für viele Unternehmen ohnehin Pflicht, nicht Kür. Der Kontrast-Check kostet nichts: Jedes Browser-DevTool zeigt das Verhältnis direkt an. Wer #999999 auf Weiß setzt, liegt bei 2,8:1 und verliert systematisch die Nutzer mit schwächeren Augen, billigen Displays und hellem Umgebungslicht — zusammen deutlich mehr als die Hälfte des Traffics.
Der schnellste Typografie-Test kostet null Euro: Website auf dem eigenen Handy öffnen, Arm ausstrecken, 30 Sekunden lesen. Wo Sie zoomen, blinzeln oder die Zeile verlieren, verliert Ihre Website Kunden — jeden Tag.
Webfonts und Performance: Schönheit hat ein Gewichtslimit
Jede Schriftdatei ist ein Netzwerk-Request vor dem ersten lesbaren Text. Drei Regeln halten Typografie schnell: Erstens maximal zwei Schriftfamilien mit insgesamt höchstens vier Schnitten — Regular, Bold und je ein Headline-Schnitt reichen fast immer. Zweitens WOFF2 als Format, das etwa 30 Prozent kleiner ist als das ältere WOFF. Drittens font-display: swap, damit der Text sofort in einer Systemschrift erscheint, statt unsichtbar auf den Webfont zu warten. Ein Font-Stack mit sechs Schnitten à 40 Kilobyte kostet auf mobilem Netz schnell eine halbe Sekunde Largest Contentful Paint — und damit messbar Conversion.
Die typischen Fehler in Kundenprojekten
Drei Muster tauchen in fast jedem Audit auf. Erstens Text auf Bildern ohne Abdunklung — je nach Bildausschnitt unlesbar, besonders im Hero. Zweitens zentrierte Mehrzeiler: Zentrierung funktioniert für Headlines mit ein bis zwei Zeilen, aber nicht für Absätze, weil das Auge bei jedem Zeilensprung neu suchen muss. Drittens Buttons mit zu kleiner Schrift: Der Call-to-Action ist das wichtigste Textelement der Seite und verdient mindestens 15 Pixel und ausreichend Innenabstand — ein Button, dessen Beschriftung man suchen muss, wird nicht geklickt.
Typografie ist der Teil des Webdesigns, den niemand bemerkt, wenn er stimmt — und den jeder spürt, wenn er fehlt. Wer die Grundwerte sauber setzt, hebt die Wirkung jedes einzelnen Textes auf der Seite, ohne ein Wort zu ändern.