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.

Inhaltsverzeichnis

1. Schriftarten-Kategorien
2. Schriftgroessen-System
3. Zeilenabstand
4. Self-hosted Fonts: DSGVO
5. Variable Fonts
6. Schriftpaare
7. 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 verbreitete Wahlen für Body-Text.

Serif (Serifenschrift)

Klassische Schriften mit Serifen. Traditionell mit Lesefreundlichkeit in Print assoziiert.

Beispiele: Merriweather, Playfair Display, Lora, Source Serif 4 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

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

Verwende ein mathematisches Verhältnis für harmonische Grössenabstufungen:

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.

body {
  line-height: 1.6;
}

h1, h2, h3 {
  line-height: 1.2;
}

WCAG-Anforderung: Auf Stufe AA (Erfolgskriterium 1.4.12) dürfen keine Inhalte verloren gehen, wenn Nutzer den Zeilenabstand auf das 1,5-Fache der Schriftgröße, den Absatzabstand auf das 2-Fache, den Buchstabenabstand auf 0,12 und den Wortabstand auf 0,16 erhöhen. Einen Zeilenabstand von mindestens 1,5 im Fließtext verlangt erst Stufe AAA (1.4.8), er ist aber auch sonst eine gute Grundeinstellung.

---

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

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. Das LG München I hat das am 20.01.2022 (Az. 3 O 17493/20) ohne Einwilligung als DSGVO-Verstoß gewertet und dem Kläger 100 € Schadensersatz zugesprochen.

Abmahn-Risiko: 2022 folgte eine Abmahnwelle mit Forderungen um 170 € pro Schreiben. Viele dieser Abmahnungen galten als rechtsmissbräuchlich, die Staatsanwaltschaft Berlin ermittelte gegen die Absender. Das Risiko bleibt trotzdem unnötig, denn Self-Hosting löst das Problem vollständig.

Die Lösung: Self-Hosting

Fonts herunterladen und vom eigenen Server ausliefern:

1. Google Fonts herunterladen über google-webfonts-helper (gwfh.mranftl.com) oder Fontsource
2. WOFF2-Format verwenden (kleinstes Format, 97 % Browser-Support)
3. 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 dringend empfohlen. Es zeigt sofort eine Fallback-Schrift an und tauscht sie aus, sobald die Web-Font geladen ist. Das verhindert unsichtbaren Text (FOIT). Damit der Austausch kein Layout verschiebt (CLS), sollte die Fallback-Schrift per size-adjust an die Maße der Web-Font angepasst sein.

Fontsource (empfohlen)

Fontsource ist eine npm-Library, die Google Fonts als lokale Pakete bereitstellt:

npm install @fontsource/inter

import '@fontsource/inter/400.css';
import '@fontsource/inter/700.css';

DSGVO-konform, performant, einfach.

---

Google Fonts Alternativen

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

Verwendung

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2');
}

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?

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 Googles Server zu laden, hat das LG Muenchen ohne Einwilligung als DSGVO-Verstoss gewertet, und es 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 du keine spezifische Markenidentität brauchst, ist Inter die sicherste Wahl.

Sind Google Fonts kostenlos?

Ja, Google Fonts stehen unter freien Lizenzen (meist SIL Open Font License, einige unter Apache 2.0). Die Schriften selbst sind kostenlos. Aber: Das Laden über Googles Server hat das LG München ohne Einwilligung als DSGVO-Verstoss gewertet. 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?

Druck den Text in der geplanten Grösse aus. Lies ihn auf dem Smartphone im Sonnenlicht. Lies ihn 50 cm vom Monitor entfernt. Frag 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 deine Website?

Wir wählen Schriften, die zu deiner Marke passen, DSGVO-konform sind und auf allen Geräten perfekt lesbar sind. Kein Rätselraten, sondern fundierte typografische Entscheidungen.

Kostenloses Erstgespräch vereinbaren →

Unsere Webdesign-Leistungen →

---

Ü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