Webtypografie ist die Auswahl und das Setzen von Schrift auf einer Website: welche Schriften, in welchen Größen, mit welcher Zeilenlänge, welchem Zeilenabstand, welchen Schriftschnitten und welchem Kontrast, und wie die Schriften geladen werden, damit die Seiten schnell bleiben. Gute Webtypografie macht Text auf jedem Bildschirm leicht lesbar, transportiert die Stimme der Marke und ist barrierefrei. Ein durchdachtes System kommt meist mit höchstens zwei Schriften und wenigen Schriftgrößen aus.
Zuletzt aktualisiert: 29. Oktober 2026.
Dieser Leitfaden zeigt, wie Sie Schriften für eine Website wählen, eine typografische Skala aufbauen und welche Einstellungen über die Lesbarkeit entscheiden. Dazu kommen Anforderungen an die Barrierefreiheit, das Laden der Schriften und die Performance, Lizenzen, Typografie in mehreren Sprachen und die Fehler, die wir am häufigsten sehen. Er richtet sich an Marketingverantwortliche, Gründer und Designer, die eine Website beauftragen oder prüfen.
Bei Odduel, einer Agentur für Kreation und Technologie in Barcelona und São Paulo, entwickeln wir im Rahmen unseres Branding Markenidentitäten, deren Schrift am Bildschirm ebenso funktionieren muss wie auf Papier. Für The Sugar Coated Cult haben wir Druk Condensed und Druk Wide als Display-Schriften mit Helvetica Neue für den Fließtext kombiniert, für Torto Cozinha Neue Metana für Überschriften mit Avenir Next für den Fließtext. Unsere eigene Website ist in einer selbst gehosteten Inter gesetzt. Die folgenden Grundsätze stammen aus dieser Arbeit.
Kurz gesagt: Wählen Sie eine Textschrift, die am Bildschirm auch in kleinen Größen gut lesbar ist, und höchstens eine weitere für Überschriften, die die Marke trägt. Setzen Sie Fließtext in mindestens 16 Pixeln, mit Zeilen von etwa 45 bis 75 Zeichen und einem Zeilenabstand vom 1,4- bis 1,6-Fachen der Schriftgröße. Bauen Sie eine kurze Größenskala auf, achten Sie auf starken Kontrast, lassen Sie Text skalierbar, laden Sie nur die Schriftschnitte, die Sie nutzen, hosten Sie Schriften selbst, wo die Lizenz es erlaubt, und prüfen Sie jede Sprache, in der Sie veröffentlichen.
Wie wählt man Schriften für eine Website aus?
Beginnen Sie mit der Aufgabe jeder Schrift, nicht mit einem Moodboard.
- Textschrift: Sie trägt Absätze, Formulare und Menüs. Sie braucht offene Formen, klar unterscheidbare ähnliche Zeichen wie I, l und 1, eine großzügige x-Höhe für kleine Größen sowie die Schriftschnitte und Kursiven, die Sie benötigen.
- Display-Schrift: optional, für Überschriften und kurze Aussagen, in denen die Marke am deutlichsten spricht. Sie darf eigenständiger sein, weil sie nur in kurzen Abschnitten und in großen Größen gelesen wird.
- Monospace- oder Akzentschrift: gelegentlich, für Code, Daten oder ein bestimmtes Gestaltungselement der Marke.
Testen Sie die Kandidaten mit Ihren echten Inhalten, in jeder Sprache, in der Sie veröffentlichen, in den Größen, die Sie verwenden werden, auf Smartphone und Laptop. Eine Schrift, die im Schriftmuster beeindruckt, kann in einem langen Absatz das Auge ermüden.
In der Display-Schrift treffen Typografie und Markenidentität aufeinander. Sie sollte aus dem Designsystem der Marke stammen, damit Website, Verpackung, Social-Media-Posts und Beschilderung mit einer Stimme sprechen. Ist die Display-Schrift der Identität nicht für das Web lizenziert oder deckt sie Ihre Sprachen nicht ab, wählen Sie eine webtaugliche Schrift mit ähnlicher Struktur statt eines beliebigen Ersatzes, und halten Sie die Entscheidung in den Brand Guidelines fest. Unser Branding-Leitfaden erklärt, wie sich Schrift in die gesamte Identität einfügt, vom Logo bis zur Tonalität.
Serif oder Sans Serif am Bildschirm?
Moderne Bildschirme stellen beide gut dar. Serifenlose Schriften bleiben der übliche Standard für Interfaces und Fließtext, weil sie in kleinen Größen und auf Displays mit geringerer Auflösung klar bleiben. Serifenschriften können bei langen Texten, redaktionellen Websites und Marken mit literarischerem Ton sehr gut funktionieren, sofern sie für Bildschirme gestaltet und in angenehmer Größe gesetzt sind. Die Wahl ist eine Frage von Ton und Lesbarkeit in Ihren Größen, keine Regel.
Wie baut man eine Typografie-Skala auf?
Eine typografische Skala ist eine kleine Auswahl an Schriftgrößen, die auf der ganzen Website einheitlich verwendet wird. Sie sorgt für stimmige Seiten und beschleunigt Design und Entwicklung.
| Funktion | Übliche Größe am Desktop | Übliche Größe am Smartphone | Zeilenabstand | Hinweise |
|---|---|---|---|---|
| Fließtext | 16 bis 20 px | 16 bis 18 px | 1,4 bis 1,6 | Absätze nie unter 16 px |
| Kleiner Text (Bildunterschriften, Labels) | 13 bis 14 px | 13 bis 14 px | 1,3 bis 1,5 | Nur für kurze Texte, mit starkem Kontrast |
| H3 | 20 bis 24 px | 18 bis 22 px | 1,2 bis 1,35 | Deutlich größer oder fetter als der Fließtext |
| H2 | 28 bis 40 px | 24 bis 30 px | 1,1 bis 1,25 | Hauptüberschriften der Abschnitte |
| H1 | 40 bis 80 px oder mehr | 30 bis 44 px | 1,0 bis 1,15 | Eine pro Seite; darf die Display-Schrift nutzen |
Das sind Spannweiten, kein Standard. Viele Websites arbeiten heute mit fluiden Größen, die mit der Fensterbreite stufenlos zwischen einem Minimum und einem Maximum wachsen. So passen Überschriften auf schmale Smartphones und wirken trotzdem auf großen Bildschirmen.
Welche Einstellungen bestimmen die Lesbarkeit?
- Zeilenlänge: etwa 45 bis 75 Zeichen pro Zeile im Fließtext, Leerzeichen mitgezählt. Bei längeren Zeilen findet das Auge den nächsten Zeilenanfang schwer; kürzere zerreißen den Lesefluss.
- Zeilenabstand: etwa das 1,4- bis 1,6-Fache der Schriftgröße für Absätze, enger bei großen Überschriften.
- Absatzabstand: deutlicher Abstand zwischen Absätzen, meist ungefähr eine Zeile.
- Ausrichtung: linksbündiger Text für die meisten Inhalte in Sprachen, die von links nach rechts gelesen werden. Blocksatz im Web besser vermeiden, er erzeugt ungleichmäßige Lücken.
- Schriftschnitte: Regular für den Fließtext, ein deutlich kräftigerer Schnitt für Hervorhebungen und Überschriften. Sehr leichte Schnitte sind in kleinen Größen schwer lesbar.
- Versalien und Laufweite: Kurze Labels in Großbuchstaben profitieren von etwas mehr Laufweite; lange Passagen in Versalien sind schwer zu lesen.
- Hurenkinder und Umbrüche: einzelne Wörter allein in der letzten Zeile von Überschriften und kurzen Absätzen vermeiden. Mit modernem CSS lassen sich Überschriftenzeilen automatisch ausgleichen.
Wie wirkt sich Typografie auf die Barrierefreiheit aus?
Barrierefreie Typografie ist vor allem gute Typografie, konsequent umgesetzt. Die Web Content Accessibility Guidelines verlangen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Zudem muss sich Text vergrößern und der Abstand erhöhen lassen, ohne dass Inhalte verloren gehen.
- Kontrast: Text auf seinem tatsächlichen Hintergrund prüfen, auch Text über Fotos.
- Skalierung: relative Einheiten verwenden, damit Text mitwächst, wenn Besucher die Größe im Browser erhöhen.
- Abstände: Layouts sollten größere Zeilen-, Buchstaben- und Wortabstände verkraften.
- Kein Text in Bildern: Überschriften und Botschaften sollten echter Text sein, der sich lesen, übersetzen und skalieren lässt.
- Klarer Fokus und klare Links: Links sollten als Links erkennbar sein, und der Tastaturfokus sollte sichtbar sein.
Unser Leitfaden zur Barrierefreiheit von Websites erklärt die Anforderungen, die in Europa gelten, ausführlicher.
Wie wirkt sich das Laden von Schriften auf die Performance aus?
Schriften sind Dateien, die jeder Besucher herunterlädt. Sie beeinflussen also die Ladezeit und wie die Seite beim Laden erscheint.
- Nur laden, was Sie nutzen: Jeder Schnitt und Stil ist eine eigene Datei. Zwei Schriftfamilien mit je drei Schnitten reichen meist völlig aus.
- Moderne Formate nutzen: WOFF2 ist komprimiert und wird von aktuellen Browsern unterstützt.
- Wenn möglich selbst hosten: Schriften von der eigenen Domain auszuliefern spart zusätzliche Verbindungen und vermeidet bei manchen Diensten die Übermittlung von Besucherdaten an Dritte. Das ist mit Blick auf die DSGVO wichtig.
- Steuern, wie Text erscheint: font-display so setzen, dass Text sofort in einer Ersatzschrift angezeigt wird, und eine Ersatzschrift mit ähnlichen Proportionen wählen, damit die Zeilen nicht springen, sobald die Webfont geladen ist.
- Die wichtigste Datei vorladen, die für den ersten Bildschirm gebraucht wird, und Schriften auf die Zeichen reduzieren, die Ihre Sprachen benötigen.
- Variable Fonts in Betracht ziehen, die viele Schnitte in einer Datei vereinen, wenn Sie mehrere Schnitte verwenden.
Googles Best Practices für Schriften erklären diese Techniken im Detail.
Wie funktioniert die Lizenzierung von Schriften im Web?
Schriften sind Software mit Lizenzen. Eine Desktop-Lizenz für die Gestaltung von Drucksachen deckt das Einbinden der Schrift auf einer Website meist nicht ab, und Weblizenzen werden oft nach monatlichen Seitenaufrufen oder nach Domains berechnet. Open-Source-Schriften dürfen im Rahmen ihrer Lizenzbedingungen frei genutzt werden. Halten Sie für jede Schrift fest, welche Lizenz sie hat und was diese abdeckt, und nehmen Sie das in Ihre Brand Guidelines auf. Was dort sonst noch hineingehört, erklärt unser Leitfaden zu Brand Guidelines.
Was ändert sich bei mehrsprachigen Websites?
Eine Website, die in mehreren Sprachen erscheint, braucht Schriften, die jedes Zeichen abdecken, das dort vorkommt: die Akzente im Französischen, Portugiesischen und Spanischen, das deutsche ß und die Umlaute sowie alle weiteren Schriftsysteme, die Sie später ergänzen wollen. Prüfen Sie den Zeichensatz einer Schrift, bevor Sie sich festlegen. Testen Sie Überschriften in der längsten Sprache, denn deutsche und portugiesische Wörter können deutlich länger sein als englische. Und stellen Sie sicher, dass Zeilenumbrüche und Silbentrennung in jeder Sprache funktionieren. Schriftgrade, bei denen eine englische Überschrift in eine Zeile passt, müssen für andere Sprachen eventuell angepasst werden.
Was sind die häufigsten Fehler in der Web-Typografie?
- Zu viele Schriften oder Schnitte: Das wirkt uneinheitlich und macht Seiten langsamer.
- Zu kleiner Fließtext, vor allem auf Smartphones.
- Grauer Text mit wenig Kontrast auf hellem Hintergrund.
- Sehr lange Zeilen auf breiten Bildschirmen.
- Text in Bildern: Screenreader können ihn nicht lesen, und er lässt sich weder übersetzen noch skalieren.
- Schriften von mehreren Diensten ohne Notwendigkeit geladen, was zusätzliche Verbindungen und Datenübertragungen bedeutet.
- Andere Sprachen vergessen: fehlende Akzente oder Überschriften, die aus dem Layout laufen.
- Kein Plan für Ersatzschriften: Text bleibt unsichtbar oder springt, während die Schriften laden.
Häufige Fragen zur Agenturwahl
Was ist Webtypografie?
Webtypografie ist die Auswahl und Gestaltung von Schrift auf Websites: Schriftarten, Schriftgrade, Zeilenlänge, Zeilenabstand, Schnitte, Kontrast und die Art, wie Schriften geladen werden. Sie entscheidet, wie leicht sich Text auf Smartphone und Computer lesen lässt, wie die Stimme der Marke ankommt und ob die Website barrierefrei und schnell ist.
Welche Schriftgröße ist für Fließtext auf einer Website ideal?
Auf den meisten Websites sollte Fließtext mindestens 16 Pixel haben, auf dem Desktop für angenehmes Lesen oft 17 bis 20 Pixel. Kleinere Grade eignen sich nur für kurze Bildunterschriften und Labels. Für die Lesbarkeit zählen ein Zeilenabstand vom 1,4- bis 1,6-Fachen des Schriftgrads und Zeilen mit 45 bis 75 Zeichen ebenso viel wie der Schriftgrad selbst.
Wie viele Schriften sollte eine Website verwenden?
In der Regel eine oder zwei: eine für den Fließtext, die auch in kleinen Graden gut lesbar ist, und auf Wunsch eine zweite für Überschriften, die die Marke ausdrückt. Laden Sie davon nur die Schnitte, die Sie tatsächlich nutzen. Mehr Schriften verbessern ein Design selten, lassen Seiten uneinheitlicher wirken und erzeugen zusätzliche Dateien, die jeder Besucher herunterladen muss.
Sollte ich Webfonts selbst hosten?
Selbst hosten ist oft die bessere Wahl, wenn die Lizenz es erlaubt. Schriften von der eigenen Domain sparen zusätzliche Verbindungen zu Servern von Drittanbietern, geben Ihnen die Kontrolle über Caching und Laden und vermeiden, dass Daten Ihrer Besucher an einen externen Dienst gehen. Das ist in Europa für die DSGVO relevant. Prüfen Sie zuerst Ihre Schriftlizenz, denn manche erlauben die Auslieferung nur über die Schriftgießerei.
Wie wirkt sich Typografie auf die Barrierefreiheit aus?
Typografie entscheidet mit darüber, ob Menschen mit Sehschwäche, Legasthenie oder älteren Geräten Ihre Inhalte lesen können. Barrierefreie Typografie setzt auf ausreichenden Kontrast, gut lesbare Schriftgrade, echten Text statt Bildern, Einheiten, mit denen sich Text vergrößern lässt, Layouts, die zusätzliche Abstände vertragen, sowie gut sichtbare Links und Fokuszustände. Diese Anforderungen stammen aus den Web Content Accessibility Guidelines (WCAG) und den europäischen Vorgaben zur Barrierefreiheit.
Gute Webtypografie ist ein kompaktes, einheitliches System, getestet mit echten Inhalten in jeder Sprache, in der Sie veröffentlichen. Sehen Sie, wie wir im Branding Schriften gestalten, die auf dem Bildschirm und im Druck funktionieren, oder erzählen Sie uns von Ihrem Projekt, und wir prüfen die Typografie Ihrer Website.
