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.