Typografie im Webdesign: Schriften, Grössen und Lesbarkeit
95 % einer Website ist Typografie. Oliver Reichenstein hat diesen Satz 2006 geschrieben — er stimmt 2026 mehr denn je. Schriftarten, Grössen, Abstände und Hierarchien entscheiden darüber, ob ein Nutzer den Content liest oder die Seite verlässt.
Zusammenfassung: 95 Prozent einer Website ist Typografie. Empfohlene Basiseinstellungen: Fliesstextgroesse 16-18px, Zeilenabstand 1.5, Zeilenlaenge 45-75 Zeichen. DSGVO-Pflicht: Fonts self-hosten, nicht ueber Google Fonts CDN laden. Variable Fonts sparen Ladezeit. Bewaehrte Schriftpaare: Space Grotesk + Inter, DM Sans + DM Serif. Kontraste muessen WCAG 2.1 AA erfuellen.
Inhaltsverzeichnis
- Schriftarten-Kategorien
- Schriftgroessen-System
- Zeilenabstand
- Self-hosted Fonts: DSGVO
- Variable Fonts
- Schriftpaare
- FAQ Dieser Artikel ist ein kompakter Leitfaden: Von Schriftarten-Kategorien über Grössensysteme bis zu DSGVO-konformen Fonts. Ohne Theorie-Ballast, mit konkreten Empfehlungen.
Schriftarten-Kategorien
Sans-Serif (Serifenlos)
Klare, moderne Schriften ohne Serifen (die kleinen “Füsschen” an Buchstabenenden).
Beispiele: Inter, Open Sans, Roboto, DM Sans, Geist Sans Verwendung: Body-Text, UI-Elemente, moderne Websites Wirkung: Modern, neutral, technisch, zugänglich
Sans-Serif ist 2026 der Standard für Webdesign. Inter und Geist Sans sind die beliebtesten Wahlen für Body-Text.
Serif (Serifenschrift)
Klassische Schriften mit Serifen. Traditionell mit Lesefreundlichkeit in Print assoziiert.
Beispiele: Merriweather, Playfair Display, Lora, Source Serif Pro Verwendung: Headlines, Longform-Content, Blogs, Kanzleien Wirkung: Seriös, etabliert, traditionell, vertrauenswürdig
Serif-Schriften funktionieren hervorragend als Heading-Font in Kombination mit einem Sans-Serif-Body.
Monospace (Nichtproportional)
Jedes Zeichen hat die gleiche Breite. Ursprünglich für Schreibmaschinen und Code.
Beispiele: JetBrains Mono, Fira Code, IBM Plex Mono, Geist Mono Verwendung: Code-Snippets, technische Daten, Zahlen, Tabellen Wirkung: Technisch, präzise, retro
Display (Dekorative Schriften)
Auffällige Schriften für grosse Grössen. Nicht für Fliesstext geeignet.
Beispiele: Bebas Neue, Playfair Display, Space Grotesk Verwendung: Headlines, Hero-Texte, Logos Wirkung: Stark, einprägsam, individuell
Regel: Display-Fonts nur für H1 und H2. Ab H3 abwärts eine neutrale Schrift verwenden.
Schriftgrössen-System
Die Basis: 16px
Der Browser-Standard für Fliesstext ist 16px (1rem). Das ist die Minimum-Grösse für lesbaren Body-Text. Kleiner als 16px nur für Labels, Captions und rechtliche Hinweise.
Empfohlene Grössenskala
| Element | Desktop | Mobile | CSS |
|---|---|---|---|
| H1 | 48–72px | 32–40px | clamp(2rem, 5vw, 4.5rem) |
| H2 | 36–48px | 28–32px | clamp(1.75rem, 3.5vw, 3rem) |
| H3 | 24–32px | 22–28px | clamp(1.375rem, 2.5vw, 2rem) |
| H4 | 20–24px | 18–22px | clamp(1.125rem, 2vw, 1.5rem) |
| Body | 16–18px | 16–18px | 1rem oder 1.125rem |
| Small | 14px | 14px | 0.875rem |
| Caption | 12px | 12px | 0.75rem |
Fluid Typography mit clamp()
Statt für jede Bildschirmgrösse eine Media Query zu schreiben, nutzt clamp() drei Werte: Minimum, bevorzugt (viewport-basiert), Maximum.
h1 {
font-size: clamp(2rem, 5vw, 4.5rem);
}Bei 320px Viewport: 2rem (32px) Bei 900px Viewport: 45px (5vw von 900) Bei 1440px+: 4.5rem (72px) — gedeckelt
Vorteil: Eine Zeile CSS ersetzt 3–5 Media Queries. Die Schrift skaliert stufenlos.
Type Scale
Verwenden Sie ein mathematisches Verhältnis für harmonische Grössenabstufungen:
| Verhältnis | Name | Faktor | Eignung |
|---|---|---|---|
| 1.200 | Minor Third | 1.2x pro Stufe | Kompakte UIs |
| 1.250 | Major Third | 1.25x pro Stufe | Allround (empfohlen) |
| 1.333 | Perfect Fourth | 1.33x pro Stufe | Content-lastige Seiten |
| 1.414 | Augmented Fourth | 1.41x pro Stufe | Grosse Headlines |
Tool: type-scale.com — interaktiver Generator für Type Scales.
Zeilenabstand (Line Height)
Der Zeilenabstand beeinflusst die Lesbarkeit massgeblich. Zu eng: Buchstaben verschmelzen. Zu weit: Das Auge verliert die Zeile.
| Element | Empfehlung |
|---|---|
| Body-Text | 1.5–1.75 (150–175 %) |
| Headlines | 1.1–1.3 |
| Small Text / Captions | 1.4–1.5 |
| Code / Monospace | 1.5–1.7 |
body {
line-height: 1.6;
}
h1, h2, h3 {
line-height: 1.2;
}WCAG-Anforderung (Level AA): Der Zeilenabstand muss mindestens 1.5 für Body-Text betragen. Nutzer müssen den Zeilenabstand auf 2.0 erhöhen können, ohne dass Inhalte abgeschnitten werden.
Zeilenlänge (Measure)
Die optimale Zeilenlänge für Fliesstext liegt bei 45–75 Zeichen pro Zeile (inkl. Leerzeichen). Über 80 Zeichen sinkt die Lesbarkeit. Unter 40 Zeichen wird der Text unruhig.
.content {
max-width: 65ch; /* ch = Breite des Zeichens "0" */
}Die CSS-Einheit ch ist ideal dafür. 65ch ergibt ungefähr 65 Zeichen pro Zeile — unabhängig von der Schriftgrösse.
Zeichenabstand und Wortabstand
| Eigenschaft | CSS | Empfehlung |
|---|---|---|
| Zeichenabstand (Tracking) | letter-spacing | -0.02em für Headlines, 0 für Body |
| Wortabstand | word-spacing | Standard belassen (0.25em) |
Headlines profitieren von leicht negativem Tracking (-0.01em bis -0.03em). Das erzeugt ein kompakteres, professionelleres Schriftbild. Body-Text niemals tracken — das verschlechtert die Lesbarkeit.
Self-hosted Fonts: DSGVO-Pflicht
Das Problem mit Google Fonts CDN
Google Fonts über das CDN (fonts.googleapis.com) zu laden, überträgt die IP-Adresse des Nutzers an Google-Server in den USA. Seit dem LG-München-Urteil (Januar 2022) ist das ohne Einwilligung ein DSGVO-Verstoss.
Bussgeld-Risiko: Es existieren Abmahnwellen mit Forderungen von 100–170 Euro pro Seitenzugriff.
Die Lösung: Self-Hosting
Fonts herunterladen und vom eigenen Server ausliefern:
- Google Fonts herunterladen über google-webfonts-helper.herokuapp.com oder Fontsource
- WOFF2-Format verwenden (kleinstes Format, 97 % Browser-Support)
- In CSS einbinden:
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2');
}font-display: swap ist Pflicht. Es zeigt sofort eine Fallback-Schrift an und tauscht sie aus, sobald die Web-Font geladen ist. Das verhindert unsichtbaren Text (FOIT).
Fontsource (empfohlen)
Fontsource ist eine npm-Library, die Google Fonts als lokale Pakete bereitstellt:
npm install @fontsource/interimport '@fontsource/inter/400.css';
import '@fontsource/inter/700.css';DSGVO-konform, performant, einfach.
Google Fonts Alternativen
| Font | Kategorie | Stil | Empfehlung für |
|---|---|---|---|
| Inter | Sans-Serif | Neutral, modern | Allround, Tech, SaaS |
| DM Sans | Sans-Serif | Geometrisch, freundlich | Startups, Kreativ |
| Geist Sans | Sans-Serif | Clean, minimal | Tech, Developer |
| Space Grotesk | Sans-Serif | Markant, einzigartig | Headlines, Branding |
| Bricolage Grotesque | Sans-Serif | Warm, humanistisch | KMU, Service |
| Merriweather | Serif | Klassisch, lesbar | Blogs, Kanzleien |
| Playfair Display | Serif | Elegant, kontrastreich | Luxus, Headlines |
| Source Serif Pro | Serif | Sachlich, professionell | Longform, Medien |
| JetBrains Mono | Monospace | Modern, Code-optimiert | Code-Snippets |
| Systemschriften | Alle | Nativ, 0 KB | Performance-Fokus |
Systemschrift-Stack (0 KB, DSGVO-frei)
Wenn Performance oberste Priorität hat:
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}Dieser Stack verwendet die native Schrift des Betriebssystems. Vorteil: 0 KB Ladezeit. Nachteil: Weniger Markenidentität, unterschiedliches Rendering je nach OS.
Variable Fonts
Variable Fonts vereinen alle Stärken (Thin bis Black), Breiten und Stile in einer einzigen Datei.
Vorteile
| Aspekt | Statische Fonts | Variable Fonts |
|---|---|---|
| Dateianzahl | 4–8 Dateien (je Stärke) | 1 Datei |
| Dateigrösse (gesamt) | 200–400 KB | 80–150 KB |
| Stärke-Abstufungen | Feste Stufen (400, 700) | Stufenlos (100–900) |
| Animierbarkeit | Nein | Ja |
Verwendung
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
}
h1 {
font-variation-settings: 'wght' 750; /* Exakte Stärke */
}Variable Fonts können auch animiert werden:
@media (prefers-reduced-motion: no-preference) {
.hover-bold:hover {
font-variation-settings: 'wght' 700;
transition: font-variation-settings 200ms ease;
}
}Schriftpaare: Welche Kombination funktioniert?
| Heading | Body | Stil |
|---|---|---|
| Playfair Display | Inter | Klassisch + Modern |
| Space Grotesk | DM Sans | Markant + Freundlich |
| Merriweather | Source Sans Pro | Seriös + Lesbar |
| Bebas Neue | Roboto | Kräftig + Neutral |
| Bricolage Grotesque | Inter | Warm + Clean |
Faustregel: Kontrast zwischen Heading und Body erzeugen. Nicht zwei ähnliche Schriften kombinieren (Inter + Roboto sieht beliebig aus). Nicht mehr als 2 Familien verwenden.
Meine Einschätzung als Agenturinhaber: Die Nummer-1-Typografie-Suende bei KMU-Websites: Zu kleine Schrift. 14px Fliesstextgroesse mag auf einem 27-Zoll-Monitor okay aussehen — auf einem Smartphone ist es unleserlich. 16px ist das absolute Minimum, 18px ist besser. Und bitte: Fonts immer self-hosten. Google Fonts ueber CDN laden ist ein DSGVO-Verstoss und kann abgemahnt werden.
FAQ
Welche Schrift ist die beste für Webdesign?
Inter. Sie ist neutral, hochlesbar, als Variable Font verfügbar, kostenlos und wird aktiv weiterentwickelt. Wenn Sie keine spezifische Markenidentität brauchen, ist Inter die sicherste Wahl.
Sind Google Fonts kostenlos?
Ja, Google Fonts sind Open Source (SIL Open Font License). Die Schriften selbst sind kostenlos. Aber: Das Laden über das Google CDN ist ohne Einwilligung ein DSGVO-Verstoss. Self-Hosting löst das Problem.
Wie viele Schriftstärken soll ich laden?
Maximal 3–4: Regular (400), Medium (500), Semibold (600) oder Bold (700). Jede zusätzliche Stärke kostet Ladezeit. Mit Variable Fonts ist das Problem gelöst — eine Datei enthält alle Stärken.
Soll ich Webfonts oder Systemschriften verwenden?
Webfonts für Markenidentität und visuelles Design. Systemschriften für maximale Performance. Kompromiss: Webfont nur für Headlines, Systemschriften für Body.
Wie teste ich Lesbarkeit?
Drucken Sie den Text in der geplanten Grösse aus. Lesen Sie ihn auf dem Smartphone im Sonnenlicht. Lesen Sie ihn 50 cm vom Monitor entfernt. Fragen Sie jemanden über 50, ob er den Text ohne Zoomen lesen kann.
Verwandte Ratgeber
- Farben im Webdesign: Psychologie und Kontraste
- Was ist gutes Webdesign?
- Responsives Webdesign: Grundlagen und Best Practices
- Modernes Webdesign 2026: 8 Merkmale
Typografie für Ihre Website?
Wir wählen Schriften, die zu Ihrer Marke passen, DSGVO-konform sind und auf allen Geräten perfekt lesbar sind. Kein Rätselraten, sondern fundierte typografische Entscheidungen.
Kostenloses Erstgespräch vereinbaren →
Über den Autor: Moritz Lehmann ist Geschäftsführer von Adfera (M.Sc. Wirtschaftsinformatik) und hat seit 2019 über 50 Websites für KMU im DACH-Raum designed und entwickelt.
Quellen
- Google Fonts: „Fonts Knowledge — Einführung in Web-Typografie” — fonts.google.com/knowledge
- W3C: „CSS Fonts Module Level 4” — w3.org/TR/css-fonts-4
- Smashing Magazine: „A Comprehensive Guide to Web Typography” — smashingmagazine.com