Typografie ist die Kunst und Wissenschaft der Textgestaltung. Im Webdesign umfasst sie die Auswahl von Schriftfamilien, die Definition von Hierarchien, die Einstellung von Zeilenabständen und Laufweiten sowie das Zusammenspiel von Text und Weißraum.
Typografie ist kein dekoratives Element – sie ist fundamentale Kommunikationsinfrastruktur. 95 % des Webdesigns ist Typografie (Oliver Reichenstein, iA, 2006). Diese vielzitierte These klingt übertrieben, trifft aber einen Kern: Jedes Informations-Produkt besteht primär aus Text. Wie dieser Text gesetzt ist, bestimmt, ob er gelesen, verstanden und geglaubt wird.
Studien zeigen, dass Nutzer eine gut gesetzte Website als vertrauenswürdiger einschätzen als eine technisch identische Seite mit schlechter Typografie (Psychological Science, 2012). Für Webdesign ist Typografie damit kein Luxus, sondern ein Konversionsfaktor.
Typografische Grundbegriffe
Schriftfamilie, Schriftschnitt und Schriftgrad
- Schriftfamilie: Übergeordnete Gruppe aller Varianten, z. B. "Poppins"
- Schriftschnitt: Ausprägung innerhalb der Familie: Regular, Bold, Italic, Light
- Schriftgrad (Font Size): Größe der Schrift, im Web in px, rem oder em
- Laufweite (Letter Spacing / Tracking): Abstand zwischen allen Zeichen eines Textes
- Kerning: Anpassung des Abstands zwischen spezifischen Zeichenpaaren (z. B. "AV")
- Zeilenabstand (Line Height / Leading): Vertikaler Abstand zwischen Grundlinien zweier Zeilen
- Zeilenlänge (Line Length / Measure): Anzahl der Zeichen pro Zeile; Optimum: 45–75 Zeichen
Anatomie einer Schrift
| Begriff | Bedeutung |
|---|---|
| Grundlinie (Baseline) | Die Linie, auf der Buchstaben stehen |
| x-Höhe | Höhe des Kleinbuchstabens "x" – prägt Lesbarkeit maßgeblich |
| Oberlänge (Ascender) | Teil, der über die x-Höhe ragt (b, d, h, k) |
| Unterlänge (Descender) | Teil, der unter die Grundlinie ragt (g, j, p, q) |
| Serif | Kleine Querstriche an den Buchstabenenden |
| Strich | Haupt- oder Haarstrich eines Buchstabens |
Schriftklassifikation
Serif-Schriften
Serifs (Antiqua) haben kleine Querstriche an den Buchstaben-Enden. Sie werden traditionell mit Vertrauenswürdigkeit, Autorität und klassischer Eleganz assoziiert. Im Web werden sie für editoriale Inhalte, Nachrichtenportale und Luxury-Brands eingesetzt.
Webgeeignete Beispiele: Georgia, Merriweather, Playfair Display, Lora, EB Garamond
Sans-Serif-Schriften
Sans-Serif-Schriften (Grotesk) sind serifenlos. Sie vermitteln Modernität, Klarheit und Neutralität. Tech-Unternehmen, Start-ups und digitale Produkte nutzen überwiegend Sans-Serif-Schriften.
Webgeeignete Beispiele: Inter, Roboto, Poppins, Open Sans, Helvetica Neue
Slab Serif
Slab Serifs haben ausgeprägte, blockartige Serifen. Sie kombinieren die Lesbarkeit von Sans-Serifs mit dem Charakter von Serifs. Häufig bei Titeln, Headings und Brand-Identitäten eingesetzt.
Webgeeignete Beispiele: Rockwell, Roboto Slab, Zilla Slab
Display-Schriften
Display-Schriften sind für große Schriftgrößen (Headings, Hero-Texte) konzipiert. Bei kleinen Größen sind sie oft schlecht lesbar. Sie transportieren Persönlichkeit und Brand-Identität.
Einsatzbereich: Nur H1/H2, nie Fließtext
Monospace-Schriften
Alle Zeichen haben identische Breite. Ideal für Code-Snippets, technische Dokumentation.
Webgeeignete Beispiele: JetBrains Mono, Fira Code, Courier
Typografische Hierarchie im Web
Typografische Hierarchie steuert, was ein Nutzer zuerst wahrnimmt und in welcher Reihenfolge er Inhalte konsumiert. Eine klare Hierarchie ist fundamental für Visuelle Hierarchie und UX Design.
| Ebene | HTML-Element | Typische Größe | Gewicht | Funktion |
|---|---|---|---|---|
| Hauptüberschrift | H1 | 36–72px | 700–900 | Seiten-Headline, einmal pro Seite |
| Abschnittsüberschrift | H2 | 28–48px | 600–700 | Haupt-Sektionen |
| Unterüberschrift | H3 | 22–32px | 600 | Unterabschnitte |
| Sub-Heading | H4 | 18–24px | 500–600 | Detail-Gliederung |
| Fließtext | p | 16–18px | 300–400 | Haupttextmenge |
| Beschriftung/Caption | small | 12–14px | 300–400 | Bildunterschriften, Meta-Info |
| Buttons / Labels | span | 14–16px | 500 | Interface-Elemente |
Goldene Regel: Jede Hierarchiestufe muss sich klar von der nächsten unterscheiden. Wenn H2 und H3 sich optisch kaum unterscheiden, ist die Hierarchie gebrochen.
Web-Fonts: Google Fonts, Adobe Fonts und Variable Fonts
Google Fonts
Google Fonts (fonts.google.com) bietet über 1.500 kostenlose Schriftfamilien mit permissiver Open-Font-License. Der CDN-Einbau via <link>-Tag ist unkompliziert.
DSGVO-Hinweis: Der direkte Einbau von Google Fonts via CDN überträgt IP-Adressen an Google-Server. Rechtlich sicher ist nur der Self-Hosting-Ansatz (Schriften herunterladen und vom eigenen Server ausliefern). Tools wie google-webfonts-helper.herokuapp.com vereinfachen das Self-Hosting.
Adobe Fonts (Typekit)
Adobe Fonts ist in Creative Cloud enthalten und bietet über 20.000 Schriften. Für Teams, die Adobe-Tools nutzen, oft die erste Wahl für Premium-Schriften.
Variable Fonts
Variable Fonts vereinen mehrere Schriftschnitte in einer Datei. Statt 6 separate Dateien für Thin, Light, Regular, Medium, Bold, Black zu laden, lädt der Browser eine einzige Datei.
Vorteile:
- Kleinere Gesamtdateigröße bei mehreren genutzten Schnitten
- Stufenlose Kontrolle über Gewicht (100–900), Breite und Kursivneigung
- Animierbare Schrift-Eigenschaften (für fortgeschrittene Typografie-Animationen)
/* Variable Font Beispiel */
@font-face {
font-family: 'Poppins';
src: url('poppins-variable.woff2') format('woff2-variations');
font-weight: 100 900;
}
h1 { font-weight: 900; }
p { font-weight: 300; }
Font-Loading-Performance
Schriften sind eine häufige Quelle von Layout-Shifts (CLS) und verzögertem Rendering (FOIT/FOUT). Best Practices:
font-display: swapverhindert unsichtbaren Text während des Ladens- Preload kritischer Schriften via
<link rel="preload"> - Nur tatsächlich benötigte Gewichte und Stile laden
woff2-Format für modernen Browsers (beste Kompression)
Lesbarkeit vs. Ästhetik: Die richtige Balance
Typografische Schönheit darf nie auf Kosten der Lesbarkeit gehen. Konkrete Messwerte:
Mindestanforderungen (WCAG 1.4.4 und 1.4.12)
- Körpertext: mindestens 16px (besser 17–18px für Content-Websites)
- Zeilenabstand: mindestens 1,5× Schriftgröße für Fließtext
- Absatzabstand: mindestens 2× Schriftgröße
- Laufweite: mindestens 0.12× Schriftgröße
Zeilenlänge und Lesbarkeit
Die optimale Zeilenlänge für angenehmes Lesen beträgt 45–75 Zeichen pro Zeile (etwa 600–700px bei 18px Schriftgröße). Längere Zeilen erhöhen die Suchzeit beim Zeilenumbruch; zu kurze Zeilen unterbrechen den Lesefluss.
Schriftkombinationen: Paare, die funktionieren
Bewährte Schriftkombinationen für Webdesign:
| Heading | Body | Stil |
|---|---|---|
| Playfair Display | Inter | Elegant + Modern |
| Montserrat | Lora | Corporate + Editorial |
| Poppins (900) | Poppins (300) | Monotypografisch, minimalistisch |
| Space Grotesk | Source Serif 4 | Tech + Editorial |
| DM Sans | DM Serif Display | Konsistente Design-DNA |
Tipp: Innerhalb einer einzigen Schriftfamilie lassen sich durch starken Gewichtskontrast (z. B. 900 für Headings, 300 für Body) sehr elegante Typografien ohne zweite Schrift gestalten.
Typografie-Tools
- Google Fonts: Kostenlose Web-Schriften, Variable Font Support
- Fontpair: Kuratierte Schriftkombinationen
- Type Scale (typescale.com): Typografische Skalen automatisch berechnen
- Hemingway App: Lesbarkeitsanalyse für Texte
- WhatFont (Browser Extension): Schrift auf jeder Website identifizieren
- Archetype (archetypeapp.com): Typografie-System interaktiv entwickeln