Typografie ist der stille Held des Webdesigns. 95% des Inhalts einer Webseite besteht aus Text; daher gehoeren Schriftwahl und typografisches Layout zu den wichtigsten Faktoren fuer die Nutzererfahrung. Gute Typografie verbessert die Lesbarkeit, staerkt die Markenidentitaet und schafft emotionale Bindung.
Schriftklassifizierung
| Schrifttyp | Charakteristik | Verwendung | Beispiele |
|---|---|---|---|
| Serif | Mit Serifen, klassisch, autoritaet | Langer Text, Editorial | Georgia, Merriweather, Lora |
| Sans-Serif | Ohne Serifen, modern, sauber | Digitale Oberflaechen, Fliesstext | Inter, Roboto, Open Sans |
| Monospace | Gleiche Breite, technisch | Code, Daten, Tabellen | JetBrains Mono, Fira Code |
| Display | Dekorativ, aufmerksamkeitsstark | Ueberschriften, Logo, Hero | Playfair Display, Poppins |
Typografie-Skala (Type Scale)
Eine konsistente Typografie-Skala sorgt fuer visuelle Hierarchie und Harmonie. Eine modulare Skala entsteht durch Multiplikation einer Basisgroesse mit einem bestimmten Verhaeltnis:
- Basisgroesse: 16px (1rem) — Fliesstext
- Verhaeltnis: Major Third (1.25) oder Perfect Fourth (1.333)
- H1: 2.488rem (39.8px)
- H2: 2.074rem (33.2px)
- H3: 1.728rem (27.6px)
- H4: 1.44rem (23px)
- Body: 1rem (16px)
- Small: 0.833rem (13.3px)
Prinzipien der Lesbarkeit
Zeilenlaenge
Die ideale Zeilenlaenge liegt zwischen 45-75 Zeichen. Zu kurze Zeilen stoeren den Lesefluss, zu lange Zeilen erschweren die Augenverfolgung.
Zeilenhoehe (Line Height)
Fuer Fliesstext ist eine Zeilenhoehe von 1.5-1.75 ideal. Bei Ueberschriften reicht 1.1-1.3.
Font Pairing (Schriftkombination)
Bei der Kombination zweier Schriften achten Sie auf die Balance zwischen Kontrast und Harmonie:
- Serif + Sans-Serif: Klassische Kombination (Ueberschrift Serif, Fliesstext Sans-Serif)
- Gleiche Familie: Verschiedene Gewichte derselben Schriftfamilie (sichere Wahl)
- Zeichenaehnlichkeit: Schriften mit passender x-Hoehe und Proportionen
font-display: swap die Systemschrift an und wechseln Sie nach dem Laden der Webschrift. Variable Fonts bieten mit einer einzigen Datei mehrere Gewichte und reduzieren HTTP-Anfragen. In TAGUM-Projekten wird der Schriftoptimierung besondere Aufmerksamkeit gewidmet.
Anteil des Webinhalts, der aus Text besteht
Quelle: Oliver Reichenstein, iA
Fazit
Typografie ist das subtilste und wirkungsvollste Werkzeug des Designs. Mit der richtigen Schriftwahl, passender Skala und sorgfaeltiger Hierarchie koennen Sie Ihre Texte in ein visuelles Erlebnis verwandeln. Das TAGUM-Team sorgt fuer typografische Exzellenz in Ihren digitalen Produkten.
