Typografie-Grundlagen fuer Webdesigner: Die Regeln die Profis kennen #

Rund 90% des Webdesigns ist Typografie. Das ist keine Uebertreibung. Text macht den Grossteil jeder Website aus, von der Navigation bis zum Footer. Und trotzdem ist Typografie das Thema, das die meisten Designer am schlechtesten beherrschen, weil sie es fuer selbstverstaendlich halten.

Nach 12 Jahren im Webdesign teile ich die Regeln, die mir niemand an der Uni beigebracht hat.

Regel 1: Maximal 2 Schriftarten #

Als Junior habe ich 4-5 Schriftarten pro Projekt verwendet. Weil ich konnte. Weil jede so schoen war.

À lire Portfolio-Website für Designer: Was wirklich zählt und was du weglassen solltest

Heute, im Jahr 2026: Eine Schriftart fuer Ueberschriften, eine fuer Fliesstext. Fertig. Manchmal sogar nur eine einzige Schriftfamilie in verschiedenen Schnitten und Gewichten. Das spart Ladezeit und schafft visuelle Ruhe.

Warum? Jede zusaetzliche Schriftart:
– Erhoet die Ladezeit (jeder Font-File ist 20-100 KB)
– Verringert die visuelle Kohaerenz
– Macht das Design-System komplexer
– Verwirrt den Leser unbewusst

Bewaehrte Kombinationen:
– Inter + Merriweather (Modern + Klassisch)
– Poppins + Lora (Geometrisch + Elegant)
– Space Grotesk + Source Serif Pro (Tech + Editorial)

Regel 2: Zeilenhoehe ist wichtiger als Schriftgroesse #

Die meisten Designer diskutieren endlos ueber 14px vs. 16px Schriftgroesse. Dabei ist die Zeilenhoehe viel wichtiger fuer die Lesbarkeit.

À lire Dark Mode richtig designen: Mehr als nur Farben invertieren

Die Formel: Zeilenhoehe = Schriftgroesse x 1.5 bis 1.7

Bei 16px Schriftgroesse bedeutet das:
– Minimum: 24px Zeilenhoehe (1.5)
– Optimal: 26px Zeilenhoehe (1.625)
– Maximum: 27px Zeilenhoehe (1.7)

Unter 1.4 wird Text schwer lesbar. Ueber 1.8 verliert er den Zusammenhang.

Fuer Ueberschriften: Zeilenhoehe = Schriftgroesse x 1.1 bis 1.3. Grosse Texte brauchen weniger Durchschuss.

À lire Micro-Animationen: Die Details, die Interfaces menschlich machen

Regel 3: Zeilenlaenge begrenzen #

Optimale Zeilenlaenge: 55 bis 75 Zeichen pro Zeile, Leerzeichen mitgezaehlt. Das ist der Bereich, in dem das menschliche Auge am bequemsten liest und am wenigsten Sakkaden (Augensprünge) machen muss. Auf Mobilgeraeten landet man durch die schmale Spalte oft automatisch in diesem Bereich, auf Desktops muss man aktiv begrenzen.

In CSS: max-width: 65ch auf dem Text-Container. Das war der beste Tipp, den mir ein Senior Designer je gegeben hat.

Zu kurze Zeilen (unter 40 Zeichen): Das Auge springt zu oft, wird muede.
Zu lange Zeilen (ueber 90 Zeichen): Das Auge verliert die naechste Zeile.

Regel 4: Vertikaler Rhythmus #

Vertikaler Rhythmus bedeutet: Alle Abstaende im Layout basieren auf einem Grundwert.

À lire Logo Design 2025: Was zeitlose Marken-Icons von kurzlebigen trennt

Mein System: Basiseinheit = 8px.
– Absatzabstand: 16px (2x Basis)
– Abstand vor H2: 48px (6x Basis)
– Abstand vor H3: 32px (4x Basis)
– Abstand nach Ueberschrift: 16px (2x Basis)

Warum 8px? Weil es durch 2 und 4 teilbar ist, was flexible Zwischenstufen erlaubt. Und weil die meisten Bildschirme auf 8px-Raster optimiert sind.

Regel 5: Kontrast in der Hierarchie #

Typografische Hierarchie braucht deutlichen Kontrast. Nicht subtile Unterschiede.

À lire Vom Wireframe zum fertigen Design: Mein bewährter Prozess

Schlechte Hierarchie:
– H1: 24px Bold
– H2: 22px Bold
– H3: 20px Bold
– Body: 18px Regular

Gute Hierarchie:
– H1: 48px Bold
– H2: 32px Bold
– H3: 24px Semi-Bold
– Body: 16px Regular

Die Faustregel: Jede Hierarchiestufe sollte mindestens 1.25x groesser sein als die naechstkleinere. Ideal: 1.33x (Perfect Fourth) oder 1.5x (Perfect Fifth).

Regel 6: Farbe ist nicht nur Schwarz #

Reines Schwarz (#000000) auf reinem Weiss (#FFFFFF) ist zu hart fuer laengere Texte. Der Kontrast ist 21:1, deutlich mehr als noetig.

Besser:
– Dunkles Grau fuer Text: #1A1A2E oder #2D3436
– Leicht warmes Weiss fuer Hintergrund: #FAFAFA oder #F8F9FA
– Kontrast-Verhaeltnis: 15:1 bis 18:1 (immer noch hervorragend)

Fuer sekundaeren Text (Beschriftungen, Fussnoten): #6B7280. Mindestens 4.5:1 Kontrast fuer WCAG AA.

Regel 7: Webfonts richtig laden #

Performance-Killer Nummer 1 bei Typografie: falsch geladene Webfonts. Ein einziger schlecht eingebundener Font kann den Largest Contentful Paint (LCP) um eine ganze Sekunde verzögern und damit den Core Web Vitals Score ruinieren.

Meine Checkliste:
– font-display: swap (Text sofort sichtbar, Font wird nachgeladen)
– Nur die Schnitte laden, die du brauchst (Regular, Bold, evtl. Italic)
– WOFF2-Format nutzen (50% kleiner als TTF)
– Fonts selbst hosten statt Google Fonts (DSGVO + Performance)
– Preload fuer kritische Fonts

Praktische Uebung #

Nimm dein aktuelles Projekt und pruefe:

1. Wie viele Schriftarten nutzt du? Reduziere auf maximal 2.
2. Wie lang sind deine Textzeilen? Miss die Zeichen pro Zeile.
3. Ist deine Zeilenhoehe zwischen 1.5 und 1.7?
4. Basieren deine Abstaende auf einem konsistenten System?

Fazit #

Gute Typografie faellt nicht auf. Schlechte Typografie schon. Diese 7 Regeln decken 90% aller typografischen Entscheidungen im Webdesign ab. Meistere sie, und deine Designs werden sofort professioneller wirken.

Der Unterschied zwischen einem guten und einem grossartigen Webdesigner? Typografie. Immer Typografie.

Haeufig gestellte Fragen

Welche Schriftgroesse ist fuer Fliesstext im Web ideal?

Fuer den Hauptfliesstext sind 16 bis 18 Pixel auf dem Desktop und mindestens 16 Pixel auf Mobilgeraeten der heutige Standard. Werte darunter werden von vielen Nutzern als anstrengend empfunden und koennen die Verweildauer negativ beeinflussen.

Sollte ich Google Fonts oder selbst gehostete Webfonts nutzen?

Aus Sicht der DSGVO und der Performance sind selbst gehostete Webfonts in Deutschland die sicherere Wahl. Google Fonts laden externe Ressourcen, was unter Umstaenden eine Einwilligung erfordert. Selbst gehostete WOFF2-Dateien sind zudem oft schneller, weil sie ueber die gleiche Verbindung wie die HTML-Seite ausgeliefert werden.

Wie viele Schriftschnitte sollte ich einbinden?

In der Regel reichen drei bis vier Schnitte pro Schriftfamilie: Regular und Bold fuer den Pflichtbereich, optional Italic und ein leichteres oder schwereres Gewicht fuer Akzente. Jeder zusaetzliche Schnitt kostet Ladezeit und sollte einen klaren Zweck im Designsystem haben.

Welcher Kontrast ist fuer barrierefreien Text noetig?

Die Web Content Accessibility Guidelines (WCAG) fordern fuer normalen Fliesstext mindestens ein Kontrastverhaeltnis von 4,5 zu 1 zwischen Text- und Hintergrundfarbe. Fuer grosse Texte ab etwa 24 Pixel oder 18,66 Pixel fett reichen 3 zu 1. Ein Wert zwischen 15 zu 1 und 18 zu 1 ist optisch angenehm und liegt deutlich ueber dem Pflichtwert.