Was ist Typografie?
Typografie ist die Kunst und Wissenschaft der Schriftgestaltung — die bewusste Wahl, Anordnung und Anwendung von Schrift, um Inhalte lesbar, hierarchisch und ästhetisch zu vermitteln. In digitalen Produkten entscheidet Typografie über Lesegeschwindigkeit, Verständlichkeit, Conversion und Markenwahrnehmung — oft stärker als Farben oder Bilder. Gute Typografie bleibt unbemerkt; schlechte ist sofort spürbar. Die Kernelemente: Schriftfamilie (Serif für klassisch-autoritäres Gefühl, Sans-Serif für modern-klar, Monospace für Code), Schriftgröße (16 px Body-Text als Mobile-Minimum, 18 px für gute Lesbarkeit auf Desktop), Zeilenhöhe (line-height 1.5–1.7 für Fließtext, 1.1–1.3 für Headlines), Buchstaben-Abstand (letter-spacing — eng für Display, normal für Body), Textbreite (45–75 Zeichen pro Zeile für optimale Lesbarkeit), Kontrast (WCAG 2.2 AA verlangt mindestens 4,5:1 für normalen Text, 3:1 für Large Text). Typografische Hierarchie entsteht durch Größe, Gewicht, Farbe und Abstände. Eine klare Hierarchie (H1 > H2 > H3 > Body) führt das Auge automatisch durch den Inhalt. Moderne Web-Projekte nutzen Typografie-Scales nach der Modular-Scale-Methode (z.B. Faktor 1.25 oder 1.333 pro Stufe) oder Fluid Typography (clamp(min, ideal, max)) für responsives Skalieren ohne Breakpoints. Technisch: Web-Fonts über Google Fonts, Adobe Fonts oder self-hosted. Performance-Faustregel: maximal 2–3 Schriftfamilien, jeweils 2–3 Gewichte (400, 600, 700 reichen meist). Font-display: swap verhindert FOIT (Flash of Invisible Text). Preload kritischer Fonts im HTML-Head hebt LCP. Variable Fonts (OpenType Variations) liefern mehrere Gewichte in einer Datei — 30–60 % kleinere Gesamt-Ladezeit bei gleicher Flexibilität. Die häufigsten Fehler: zu viele Fonts, zu kleiner Body-Text auf Mobile, zu enge Zeilen, schlechter Kontrast — alle direkt Accessibility- und Conversion-Killer.
Wichtige Punkte
- Body-Text minimum 16 px auf Mobile, 18 px für optimale Desktop-Lesbarkeit — kleiner ist Accessibility-Problem und Conversion-Killer
- Line-Height 1.5–1.7 für Fließtext, 1.1–1.3 für Headlines — Textblöcke ohne ausreichende Zeilenhöhe wirken gedrängt und ermüden
- Optimale Textbreite: 45–75 Zeichen pro Zeile — längere Zeilen verlieren Leser bei jedem Umbruch
- Kontrast WCAG 2.2 AA: 4,5:1 für Body, 3:1 für Large Text — in der EU seit 2025 Pflicht für kommerzielle Websites
- Maximal 2–3 Schriftfamilien pro Projekt, jeweils 2–3 Gewichte — mehr ist Performance-Overhead und visuelles Chaos
- Variable Fonts (OpenType Variations) liefern mehrere Gewichte in einer Datei — 30–60 % kleinere Ladezeit
- Font-display: swap gegen FOIT (Flash of Invisible Text) — Text sichtbar während Font lädt
- Preload kritischer Fonts im HTML-Head verbessert LCP messbar
- Modular Scale oder Fluid Typography (clamp) statt fixer Breakpoints — responsives Skalieren ohne Sprünge
Praxisbeispiel
“Unser Typografie-System für einen österreichischen Fintech-Kunden basiert auf Bricolage-Grotesque-Variable-Font mit fluid-clamp-Scale — 30 % kleinerer Font-Download, Lesbarkeit auf allen Device-Größen, WCAG 2.2 AA Kontrast überall.”
Häufige Fragen zu Typografie
Bewährt sind maximal zwei Schriftfamilien — eine für Überschriften, eine für Fließtext — plus deren Schnitte (Regular, Medium, Bold). Mehr Schriften wirken unruhig, verlangsamen die Ladezeit und verwässern die Markenidentität.
Für Fließtext haben sich 16px als Minimum etabliert, auf großen Screens eher 18px; Zeilenhöhe etwa das 1,5-Fache der Schriftgröße und Zeilenlängen von 50–75 Zeichen gelten als angenehm lesbar.
Webfonts werden mit der Seite ausgeliefert, statt auf dem Gerät installiert zu sein. Wichtig sind Performance (Fonts subsetten, modern als WOFF2 laden) und Datenschutz: Google Fonts sollten DSGVO-konform lokal gehostet werden statt von Google-Servern.
Professionelle Hilfe zum Thema "Typografie"?
Das GoldenWing-Team bietet strategische Webdesign-Leistungen für österreichische und internationale Kunden. Von der Erstberatung bis zur Umsetzung — mit messbaren Ergebnissen.