Der Schlüssel zur Lesbarkeit: Tipps für eine optimale Web-Typografie
Eine gute Web-Typografie ist der Unterschied zwischen «liest sich gerne» und «schliess ich gleich wieder». Jeder, der Texte auf Websites veröffentlicht, sollte diese Grundlagen kennen.
Acht Regeln für lesbare Web-Typografie
- Schriftart wählen — Entscheide dich für 1–2 Schriften, die zu deiner Marke passen. Mehr macht das Gesamtbild unruhig. Sans-Serif (z.B. Inter, Open Sans) liest sich am Bildschirm meist besser als Serif.
- Schriftgrösse: mindestens 16 px — Darunter wird’s für Bildschirmnutzer mühsam. Auf Mobile gerne 17–18 px Body.
- Zeilenhöhe 1.5–1.8 — Zu wenig Luft erstickt den Text. Zu viel zerlegt ihn.
- Kontrast prüfen — Mindestens WCAG-AA-Verhältnis 4.5:1. Hellgrau auf Weiss ist hübsch, aber nicht lesbar.
- Fett, kursiv, unterstrichen — sparsam — Wenn alles wichtig ist, ist nichts wichtig.
- Hierarchie schaffen — Drei Schriftgrössen reichen für 90 % aller Websites.
- Linienlänge 45–75 Zeichen — Kürzer wirkt abgehackt, länger ermüdet die Augen.
max-width: 65chim CSS löst das elegant. - Mobile zuerst — Was auf 360 px funktioniert, klappt auch auf 1440 px. Umgekehrt nicht.
Mein Tipp aus der Praxis
Die meisten typografischen Probleme entstehen nicht beim Auswählen der Schriftart, sondern beim Definieren der Hierarchie. Wer einmal sauber H1, H2, Body und Caption festgelegt hat, hat 80 % der Arbeit erledigt. In meinen Webdesign-Kursen sehe ich das immer wieder: ein klares Type-System macht aus einer mittelmässigen Seite eine professionelle.
Wer das in Figma vor dem Bauen entwerfen will, ist im Flink mit Figma-Kurs richtig — dort baust du dein eigenes Type-System auf und überträgst es 1:1 auf deine Website.
Möchtest du Webdesign von Grund auf lernen?
Im Flink-mit-Figma-Kurs baust du in einem Tag deine erste komplette Website-Vorlage — inklusive Type-System, Farben, Komponenten.
