Was ist Typografie?
Typografie ist mehr als "die Schriftart aussuchen". Sie umfasst alles, was mit der Darstellung von Schrift zu tun hat: Schriftart, Schriftgröße, Schriftschnitt, Zeilenabstand, Buchstabenabstand, Zeilenlänge, Hierarchie, Kontrast. Jedes Detail beeinflusst, ob ein Text gelesen wird oder nicht.
Im Print hat Typografie eine Tradition von Jahrhunderten. Im Web ist sie jünger, aber genauso wichtig. Was viele unterschätzen: Bei einer durchschnittlichen Website ist der visuelle Eindruck zu großen Teilen Typografie. Headlines, Fließtext, Buttons, Navigation — alles Schrift. Wenn die Typografie sitzt, wirkt eine Seite hochwertig, selbst mit minimalem Bildmaterial. Wenn sie nicht sitzt, hilft auch das beste Foto nicht.
Beispiel: Stripe und Apple sind beide für ihre Typografie bekannt. Stripe nutzt eine eigene Schrift namens "Sonder", Apple seit Jahren "SF Pro". Beide Unternehmen geben Millionen für ihre Websites aus — und der größte Teil davon fließt in Details, die du als Laie nie als "Typografie" identifizieren würdest. Aber sie machen den Unterschied zwischen "wirkt teuer" und "wirkt billig".
Welche typografischen Begriffe solltest du kennen?
Ein paar Grundbegriffe, die in jedem Webdesign-Gespräch fallen:
| Begriff | Was er bedeutet |
|---|---|
| Serif | Schrift mit kleinen Häkchen an den Buchstaben (Times, Georgia) |
| Sans-Serif | Schrift ohne Häkchen, glatt (Helvetica, Inter, Roboto) |
| Schriftschnitt | Variante derselben Schrift: Regular, Bold, Italic, Light |
| Schriftgröße | Höhe der Buchstaben, im Web meist in rem oder px |
| Line-Height | Zeilenabstand — wie viel Luft zwischen den Zeilen liegt |
| Letter-Spacing | Abstand zwischen Buchstaben (Tracking) |
| Hierarchie | Größenverhältnisse zwischen Überschriften und Fließtext |
| Kontrast | Wie stark sich Schrift vom Hintergrund abhebt |
| Web-Font | Schrift, die vom Server geladen wird (Google Fonts, Adobe Fonts) |
Drei weitere Begriffe solltest du kennen: Variable Fonts sind Schriften, bei denen eine einzige Datei stufenlos alle Schnitte enthält — spart PageSpeed, weil nur eine Datei statt fünf geladen wird. Der Modular Scale ist die typografische Skala, ein festes Verhältnis (z.B. 1.25), aus dem alle Schriftgrößen abgeleitet werden. So entsteht Hierarchie ohne Zufall. Font-Pairing meint die bewusste Kombination von zwei Schriften, meistens einer Serif und einer Sans-Serif, mit Kontrast, aber nicht zu viel.
Wer diese Begriffe kennt, kann mit jedem Designer auf Augenhöhe reden.
Warum ist Typografie für deine Website wichtig?
Drei Gründe, alle messbar:
Lesbarkeit. Fließtext, der zu eng gesetzt, zu klein oder im falschen Kontrast gesetzt ist, wird nicht gelesen. Punkt. Wer das ignoriert, kann den besten Text der Welt schreiben — niemand kommt am ersten Satz vorbei. Untersuchungen zur Lesetiefe zeigen seit Jahren denselben Effekt: Schriftgröße und Zeilenabstand korrelieren direkt mit Verweildauer und Conversion Rate.
Markenwirkung. Schrift transportiert Charakter. Eine schwere Serif-Schrift wirkt traditionell, seriös, akademisch. Eine schlanke Sans-Serif wirkt modern, technisch, freundlich. Wer das eine wählt, wenn das andere passt, sendet das falsche Signal. Eine Anwaltskanzlei in einer Comic-Schrift verliert vor dem ersten Wort.
SEO. Klingt überraschend, ist aber so. Google misst, wie lange Besucher auf einer Seite bleiben — und Typografie beeinflusst das massiv. Je angenehmer eine Seite zu lesen ist, desto länger bleiben Nutzer, desto besser dein Ranking. Es gibt keinen direkten "Typografie-Rankingfaktor", aber einen sehr direkten indirekten Effekt.
Konkretes Beispiel: Ein Unternehmensberater in Hamburg lässt seine Website überarbeiten. Vorher Arial in 14 Pixel mit Zeilenabstand 1.2 — Default aus einem alten Theme. Nachher Inter in 18 Pixel mit Zeilenabstand 1.6, Headlines in einer kontraststarken Serif, klare Größenhierarchie. Inhalt fast identisch, Verweildauer steigt um über die Hälfte, Anfragen nehmen messbar zu.
Web-Fonts und ihre Tücken
Im Web kannst du fast jede Schrift einsetzen — entweder als Web-Font (Google Fonts, Adobe Fonts, eigener Server) oder als System-Font (die Schriften, die ohnehin auf dem Gerät des Besuchers installiert sind). Beides hat seine Vor- und Nachteile.
- Web-Fonts geben dir volle Kontrolle. Du wählst eine Schrift, sie sieht überall gleich aus.
- Web-Fonts kosten Performance. Jede Schriftdatei muss geladen werden. Wer fünf Schnitte einbindet, hat eine deutlich langsamere Seite.
- System-Fonts sind blitzschnell. Sie sind schon da. Apple, Microsoft, Google haben alle eigene gute Fonts vorinstalliert.
- DSGVO-Falle. Google Fonts direkt von google.com einzubinden ist in Deutschland datenschutzrechtlich heikel — Schriften lieber selbst hosten.
- Maximal zwei Schriftfamilien. Eine für Headlines, eine für Fließtext. Mehr wirkt unruhig und nimmt das Tempo aus der Seite.
Häufige Fehler bei Typografie im Web
Zu kleiner Fließtext. Unter 16 Pixel ist auf dem Desktop heute zu klein. 18 bis 20 Pixel sind die neue Norm, weil Bildschirme dichter geworden sind und Menschen länger lesen.
Zu enger Zeilenabstand. 1.2 sieht in Word vielleicht okay aus, im Web wirkt es gequetscht. 1.5 bis 1.7 ist der Sweet Spot für Fließtext.
Zu lange Zeilen. Eine Zeile mit 150 Zeichen ist anstrengend zu lesen. 60 bis 80 Zeichen pro Zeile ist die Lese-Komfortzone.
Zu wenig Hierarchie. Wenn H1, H2 und Fließtext fast gleich groß sind, weiß das Auge nicht, wo es zuerst hingucken soll. Ein Größensprung von 1.5 bis 2 zwischen den Ebenen ist ein guter Anfang.
Schwacher Kontrast. Hellgrauer Text auf hellgrauem Hintergrund mag "edel" wirken, fällt aber durch jeden Barrierefreiheits-Check. Mindestens 4.5:1 Kontrastverhältnis für Fließtext.