Web-Typografie bezeichnet den gezielten Einsatz von Schriften auf Webseiten — von der Schriftwahl über das Font-Loading bis hin zur optimalen Darstellung auf unterschiedlichen Bildschirmen und Auflösungen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Webfonts, digitale Typografie, Online-Schriftgestaltung
Was ist Web-Typografie?
Typografie ist im Web mehr als Schriftauswahl: Sie umfasst technische Fragen (Wie lädt der Font? Wie beeinflusst er die Performance?) ebenso wie gestalterische (Wie viel Zeilenabstand braucht ein Fließtext auf 1440 px Breite?). Die Besonderheit gegenüber Print-Typografie liegt in der Variabilität: Unterschiedliche Bildschirme, Betriebssysteme, Auflösungen und Browser rendern Schriften unterschiedlich. Gute Web-Typografie muss in all diesen Kontexten funktionieren.
Erklärung
System Fonts vs. Webfonts
Historisch waren Webdesigner auf System Fonts beschränkt — Schriften, die auf dem Endgerät des Nutzers vorinstalliert sind (Arial, Georgia, Verdana). Diese laden schnell, sehen aber überall gleich aus und bieten wenig Differenzierungspotenzial.
Webfonts sind Schriftdateien, die vom Server oder einem CDN geladen werden. Sie ermöglichen individuelle Typografie, verursachen aber Ladezeit. Die wichtigsten Formate:
- WOFF2 (Web Open Font Format 2): Aktueller Standard, beste Kompression, von allen modernen Browsern unterstützt
- WOFF: Älteres Format als Fallback für ältere Browser
- TTF/OTF: Desktop-Formate, werden selten direkt im Web eingesetzt
Google Fonts
Google Fonts ist der meistgenutzte Font-Dienst weltweit — kostenlos, einfach zu integrieren und umfangreich (über 1.400 Schriftfamilien). Die Einbindung erfolgt via <link>-Tag im HTML-Header oder über CSS @import.
Datenschutz-Hinweis für deutsche Websites: Seit einem Urteil des LG München (2022, Az. 3 O 17493/20) gilt das direkte Laden von Google Fonts über die Google-Server als DSGVO-problematisch, da dabei IP-Adressen an Google übertragen werden. Empfohlene Lösung: Fonts selbst hosten (Self-Hosting) — Dateien herunterladen und vom eigenen Server ausliefern. Tools wie google-webfonts-helper.herokuapp.com erleichtern das Self-Hosting.
Variable Fonts
Variable Fonts sind eine der bedeutendsten typografischen Innovationen des Webs der 2010er Jahre. Statt mehrerer separater Dateien (Regular, Bold, Italic, Semibold …) enthält eine einzige Variable Font-Datei eine unbegrenzte Anzahl von Schriftstilen auf einer Achse:
- Weight-Achse (wght): Stufenlose Steuerung von Ultralight bis Extrabold
- Width-Achse (wdth): Kondensiert bis Extended
- Italic / Slant: Kursivierung
- Herstellerdefinierte Achsen: z. B. optische Größe, Kontrast
``css h1 { font-variation-settings: 'wght' 650, 'wdth' 75; } ``
Vorteile: Deutlich geringere Dateigröße bei hoher Designflexibilität, flüssige Animationen zwischen Schriftstärken.
Font-Loading und Performance
Font-Loading ist eines der häufigsten Performance-Probleme im Web. Zwei Problemphänomene:
- FOUT (Flash of Unstyled Text): Browser zeigt zuerst System Font, wechselt dann zu Webfont — sichtbares Flackern
- FOIT (Flash of Invisible Text): Browser blendet Text aus, bis der Font geladen ist — kurze Unsichtbarkeit
Lösung über die CSS-Eigenschaft font-display:
font-display: swap→ FOUT, Text sofort sichtbar (empfohlen für Lesbarkeit)font-display: optional→ Webfont nur geladen, wenn sofort verfügbar (empfohlen für Performance)font-display: block→ FOIT, kurze Unsichtbarkeit (Standard ohne Angabe)
Weitere Optimierungsmaßnahmen:
- `<link rel="preload">`: Font wird priorisiert früh geladen
- Subsetting: Nur benötigte Zeichen in die Font-Datei aufnehmen (reduziert Größe drastisch)
- `font-display: optional` in Kombination mit Service Workers für optimale Performance
Lesbarkeit und Typografische Grundprinzipien
Gute Web-Typografie folgt bewährten Regeln:
Schriftgröße: Fließtext sollte auf Desktop nicht unter 16 px (1 rem) liegen. Viele Publisher empfehlen 18–21 px für optimale Lesbarkeit bei längeren Texten.
Zeilenabstand (line-height): 1.5–1.75× der Schriftgröße gilt als Richtwert für Fließtext. Überschriften benötigen weniger (1.1–1.3).
Zeilenlänge (measure): Die optimale Zeilenlänge liegt zwischen 50–75 Zeichen (ca. 30–40 rem). Zu breite Zeilen ermüden das Auge.
Kontrast: WCAG 2.1 fordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text. Werkzeuge wie der WebAIM Contrast Checker helfen bei der Überprüfung.
Beispiele
Typografisches System in CSS: ```css :root { --font-body: 'Inter', sans-serif; --font-heading: 'Playfair Display', serif; --font-size-base: 1.125rem; / 18px / --line-height-body: 1.7; }
body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-body); } ```
In der Praxis
Im deutschsprachigen Agentur-Umfeld haben sich bestimmte Schriften als beliebt erwiesen: Inter für UI-Interfaces, Playfair Display für Editorial-Designs, Roboto für informationsreiche Anwendungen. Für Markenprojekte kommen oft exklusive Lizenzschriften wie GT Walsheim oder ABC Diatype zum Einsatz.
Für die Lazi-Akademie oder vergleichbare Bildungseinrichtungen sind Lesbarkeit und Barrierefreiheit besonders relevant: klar strukturierte Typografie-Hierarchie, ausreichend Kontrast und eine vernünftige Zeilenlänge erhöhen die Verständlichkeit erheblich.
Vergleich & Abgrenzung
| Schriftart-Typ | Vorteil | Nachteil |
|---|---|---|
| System Fonts | Schnell, kein Laden | Begrenzte Auswahl |
| Google Fonts | Kostenlos, große Auswahl | DSGVO, Abhängigkeit |
| Self-Hosted Fonts | DSGVO-konform, Kontrolle | Aufwand, Hosting-Kosten |
| Variable Fonts | Flexibel, kompakt | Noch nicht alle Schriften verfügbar |
Häufige Fragen (FAQ)
Darf ich Google Fonts auf meiner deutschen Website verwenden? Nur wenn du die Fonts selbst hostest. Das direkte Laden über die Google-CDN überträgt IP-Adressen an US-Server und ist laut deutschem Datenschutzrecht problematisch (LG München, 2022). Self-Hosting ist die sichere Lösung.
Wie viele Fonts sollte eine Website haben? Als Faustregel gilt: maximal zwei Schriftfamilien (eine für Überschriften, eine für Fließtext). Mehr Schriften erhöhen den Ladeaufwand und erzeugen visuelles Chaos.
Was ist der beste Font für Lesbarkeit im Web? Für Interfaces eignen sich humanistische Grotesk-Schriften wie Inter, Nunito oder Source Sans. Für längere Lesetexte sind Serifenschriften wie Georgia, Merriweather oder Charter angenehmer — besonders auf hochauflösenden Bildschirmen.
Verwandte Einträge
- Web Design Grundlagen — Grundprinzipien visueller Gestaltung im Web
- Web Accessibility (Barrierefreiheit) — Kontrast und Lesbarkeitsanforderungen nach WCAG
- Dark Mode Design – dunkle Farbschemata für Apps und Websites — Typografische Anpassungen im Dark Mode
- Design System für Web — Typografie-Token in Design Systemen
Weiterführend
- Bringhurst, Robert: The Elements of Typographic Style, Version 4.0, Hartley & Marks, 2012
- Lupton, Ellen: Thinking with Type, Princeton Architectural Press, 2010
- Santa Maria, Jason: On Web Typography, A Book Apart, 2014
- Coyier, Chris: CSS-Tricks — Font Loading Strategies, css-tricks.com, 2016
- W3C: Web Content Accessibility Guidelines (WCAG) 2.1, w3.org, 2018
