Eine Website kann hochwertig aussehen und trotzdem anstrengend zu lesen sein. Zu kleine Schrift, blasse Texte und unruhige Überschriften erschweren den Zugang zum Angebot. Gute Typografie im Webdesign hilft Menschen, Inhalte zu verstehen und den nächsten Schritt zu finden. Sie prägt zugleich, wie Ihre Marke wahrgenommen wird.
Dieser Ratgeber zeigt, wie Sie Schriftarten sinnvoll auswählen, Informationen ordnen und die Lesbarkeit Ihrer Unternehmenswebsite prüfen. Die Beispiele sind Gestaltungsvorschläge, keine allgemeingültigen Erfolgsformeln.
Selbst ausprobieren
Derselbe Text, ein anderes Lesegefühl
Verändern Sie Schriftgröße und Zeilenlänge. Das Muster bleibt gleich. So lässt sich die Wirkung direkt vergleichen, ohne einen ganzen Website-Entwurf umzubauen.
Die verfügbare Bildschirmbreite begrenzt das Muster zusätzlich. Eine Zeichenbreite ist hier eine CSS-Maßeinheit, keine genaue Anzahl Buchstaben pro Zeile.
Die Bedienung läuft nur auf dieser Seite. Ihre Eingaben werden von diesem Element nicht gespeichert oder übertragen.
Das Wichtigste auf einen Blick
- Lesbarkeit und Verständlichkeit haben Vorrang vor dekorativen Effekten.
- Eine gut ausgebaute Schriftfamilie reicht für viele Websites; eine zweite braucht eine klare Aufgabe.
- Schriftgröße, Zeilenlänge, Abstände und Kontrast wirken zusammen.
- Prüfen Sie echte Inhalte auf dem Smartphone und mit vergrößerter Darstellung.
Welche Schrift passt zu Ihrer Website?
Beginnen Sie mit dem Charakter Ihres Unternehmens: Soll der Auftritt sachlich, nahbar, handwerklich oder expressiv wirken? Sammeln Sie dafür drei konkrete Eigenschaften. Anschließend vergleichen Sie Schriften anhand derselben Überschrift, eines längeren Absatzes und eines Formulars. Ein schönes Alphabet allein sagt wenig darüber aus, wie sich eine Website später liest.
| Schriftgruppe | Möglicher Einsatz | Darauf achten |
|---|---|---|
| Serifenschriften | Redaktionelle Inhalte, prägnante Überschriften, charaktervolle Marken | Auch kleine Größen und kräftige Schnitte auf dem Bildschirm testen. |
| Serifenlose Schriften | Navigation, Formulare, Fließtext und sachliche Auftritte | Buchstaben wie I, l und die Ziffer 1 sollten unterscheidbar sein. |
| Handschriftliche und dekorative Schriften | Kurze Akzente mit besonderem Ausdruck | Für längere Texte und wichtige Bedienelemente meist ungeeignet. |
Diese Gruppen bestimmen die Markenwirkung nicht allein. Eine Serifenschrift ist nicht automatisch seriös, eine serifenlose Schrift nicht automatisch modern. Proportionen, Strichstärke, Bildsprache und der übrige Auftritt entscheiden mit. Prüfen Sie außerdem Umlaute, ß, Eurozeichen, Ziffern und alle tatsächlich benötigten Schriftschnitte.
Eine klare Hierarchie erleichtert die Orientierung
Legen Sie fest, welche Aufgabe jede Textebene übernimmt. Der Seitentitel nennt das Thema. Zwischenüberschriften beantworten Teilfragen. Der Fließtext erklärt; Bildunterschriften ergänzen. Wenn jede Ebene anders gestaltet ist, entsteht Unruhe. Wenn alles gleich aussieht, fehlt die Orientierung.
- Seitentitel: verständlich und konkret, ohne den kompletten Einleitungstext zu wiederholen.
- Abschnittsüberschriften: beschreiben, was Leser im folgenden Abschnitt finden.
- Fließtext: kurze Absätze mit jeweils einem Gedanken.
- Hervorhebungen: einzelne entscheidende Aussagen fett setzen, nicht ganze Textblöcke.
Eine Überschrift sollte auch technisch als Überschrift angelegt sein. Nur die Schrift größer zu machen ersetzt die Inhaltsstruktur nicht. Gerade bei längeren Ratgebern hilft eine sinnvolle Reihenfolge aus H2- und bei Bedarf H3-Überschriften.
Schriftgröße, Zeilenlänge und Abstände abstimmen
Für einen ersten Entwurf können etwa 18 Pixel Fließtext, eine Zeilenhöhe von ungefähr 1,5 bis 1,7 und rund 50 bis 75 Zeichen pro Zeile ein brauchbarer Ausgangspunkt sein. Das sind praktische Startwerte, keine verbindlichen Vorgaben. Eine schmale Schrift verhält sich anders als eine breite; Mobilgeräte benötigen eine andere Textbreite als ein großer Monitor.
Testen Sie einen echten Absatz Ihrer Website. Finden Sie den Beginn der nächsten Zeile mühelos? Wirkt der Text weder gedrängt noch auseinandergerissen? Bleiben lange deutsche Wörter in Karten, Buttons und Formularen vollständig sichtbar? Für längere deutsche Webtexte ist linksbündiger Satz häufig eine unkomplizierte Wahl. Blocksatz kann ungleichmäßige Wortabstände erzeugen.
Kontrast und Vergrößerung gehören zum Lesetest
Die WCAG 2.2 nennen für normalen Text auf Stufe AA mindestens 4,5:1 Kontrast zum Hintergrund; für ausreichend großen Text gilt 3:1. Groß bedeutet dabei mindestens 18 Punkt beziehungsweise 14 Punkt bei fetter Schrift. Für Logos und bestimmte andere Inhalte gibt es Ausnahmen. Sehr dünne Schriften können trotz rechnerisch ausreichendem Kontrast schwer lesbar sein. Die W3C-Erläuterung zu Textkontrasten beschreibt die Details.
Auch individuell vergrößerte Textabstände dürfen keine Inhalte oder Funktionen verschwinden lassen. Das W3C nennt hierfür unter anderem eine Zeilenhöhe von 1,5, einen Absatzabstand von 2, einen Zeichenabstand von 0,12 und einen Wortabstand von 0,16 der jeweiligen Schriftgröße. Das sind Prüfeinstellungen für Nutzeranpassungen, keine Pflichtwerte für Ihr Standarddesign. Quelle: WCAG: Text Spacing.
Praxisbeispiel: die Leistungsseite eines Handwerksbetriebs
Angenommen, eine Leistungsseite enthält sechs gleich große Überschriften, enge Absätze und einen Button mit „Mehr“. Ein sinnvoller neuer Aufbau beginnt mit „Badsanierung aus einer Hand“, nennt anschließend Leistungen, Ablauf und Ansprechpartner und endet mit „Beratung zur Badsanierung anfragen“. Die typografische Hierarchie folgt diesen Aufgaben. Eine einzelne Schriftfamilie mit regulärem und kräftigem Schnitt kann dafür ausreichen.
Bewerten Sie den Entwurf anhand einer konkreten Aufgabe: Eine Testperson soll herausfinden, ob das Unternehmen ihr Projekt übernimmt und wie sie Kontakt aufnimmt. Beobachten Sie, wo sie stockt. So finden Sie eher die tatsächliche Hürde als mit der Frage, welche Schrift „schöner“ ist.
Checkliste vor der Veröffentlichung
- Sind Überschriften, Navigation und Fließtext auf einem kleinen Smartphone lesbar?
- Bleiben Texte bei 200 Prozent Zoom vollständig nutzbar?
- Sind Kontraste auch über Fotos oder farbigen Flächen ausreichend?
- Sind Buttons verständlich beschriftet und lange Wörter nicht abgeschnitten?
- Ist die Schrift für die vorgesehene Webnutzung lizenziert?
- Werden nur benötigte Schriftdateien und Schnitte geladen?
- Bleibt der Inhalt auch beim Laden oder Ausfall der Webschrift verständlich?
Der schnelle Lesetest
Öffnen Sie Ihre eigene Leistungsseite auf dem Smartphone. Erkennen Sie sofort das Angebot und den nächsten Schritt – auch wenn Sie nur Überschriften und Hervorhebungen überfliegen?
Häufige Fragen zur Typografie
Wie viele Schriftarten braucht eine Website?
Häufig reicht eine Familie mit mehreren Schriftschnitten. Eine zweite Schrift kann Überschriften differenzieren. Entscheidend ist, dass beide klar zugewiesene Aufgaben haben und in Größen, Strichstärken und Zeichenformen zusammenpassen.
Welche Schrift liest sich am besten?
Es gibt keine Schrift, die für alle Menschen und Inhalte gleichermaßen am besten ist. Vergleichen Sie echte Texte und prüfen Sie Zeichenunterscheidung, Kontrast, Größen und Darstellung auf den Geräten Ihrer Zielgruppe.
Typografie als Teil eines stimmigen Webauftritts
Einzelne Schriftwechsel lösen selten alle Probleme einer Website. Sinnvoll ist die gemeinsame Betrachtung von Inhalt, Gestaltung und Nutzerführung. Retaro unterstützt Sie bei Webdesign und Webentwicklung. Wenn Sie Ihren aktuellen Auftritt prüfen lassen möchten, beschreiben Sie uns Ihr Vorhaben.
Redaktionell überarbeitet am 7. November 2026. Weiterführend: W3C: Gestaltung und Textausrichtung.
