Web Typografie: So wählen Sie die richtige Schrift für Ihre Website

Web Typografie umfasst alle Entscheidungen darüber, wie Text auf einer Website erscheint: Schriftart, Größe, Zeilenabstand, Zeilenlänge, Schriftschnitt und Ladeverhalten. Ich baue seit 2012 Websites für Kunden, und ein Muster bleibt immer gleich. Besucher sehen Ihr Logo einmal, Ihren Text aber lesen sie jede Sekunde. Deshalb ist die Schriftwahl keine Dekoration, sondern das Rückgrat der Nutzererfahrung.

Dieser Leitfaden behandelt Schriftkombinationen, Lesbarkeit, Zeilenlänge, Sprachunterstützung und die Performance von Webfonts. Die allgemeine Ladezeit habe ich bereits im Artikel wie die Ladezeit SEO beeinflusst erklärt. Hier geht es also nur um Schrift.

Was ist Web Typografie und warum ist sie so wichtig?

Web Typografie ist die Planung von Bildschirmtext als System: Schriftart, Größe, Abstände, Zeilenlänge, Schnitt und die Art, wie die Schrift lädt. Das Ziel ist Text, der sich leicht liest, schnell lädt und zur Marke passt. Kurz gesagt: Gute Typografie bemerkt niemand, schlechte Typografie ermüdet den Leser schon im ersten Absatz.

Sie ist aus drei Gründen wichtig. Erstens Verständlichkeit: Wer Ihr Angebot, Ihre Preise oder Ihr Formular nicht lesen kann, meldet sich nicht. Zweitens Vertrauen, denn uneinheitliche Überschriften und gedrängte Absätze wirken unprofessionell. Drittens Performance, weil jeder Webfont eine zusätzliche Datei ist, die der Browser laden muss.

Den häufigsten Fehler sehe ich bei der Auswahl nach einem schönen Entwurf. Allerdings wirkt dieselbe Schrift auf einem 13 Zoll Laptop, einem Smartphone im Sonnenlicht und einem älteren Android Gerät völlig unterschiedlich. Daher teste ich Schriften immer auf echten Bildschirmen mit echten Inhalten.

Wie beeinflusst Web Typografie die Nutzererfahrung?

Typografie bestimmt, wie lange Besucher bleiben und wie viel sie verstehen. Zum Beispiel funktioniert 14 Pixel grauer Text auf dem Desktop vielleicht noch. Auf dem Smartphone strengt er dagegen die Augen an. Nutzer bemerken das selten bewusst; sie schließen einfach die Seite und gehen zur Konkurrenz.

Konkret zeigt sich der Effekt an diesen Stellen:

• Scangeschwindigkeit: Eine klare Hierarchie der Überschriften führt Leser in Sekunden zum richtigen Abschnitt.
• Leseermüdung: Enger Zeilenabstand und sehr lange Zeilen ermüden das Auge bei längeren Texten.
• Vertrauen: Einheitliche Typografie signalisiert ein sorgfältiges Unternehmen.
• Barrierefreiheit: Geringer Kontrast und kleine Schrift schließen Menschen mit Sehschwäche aus.
• Conversion: Ein Nutzenversprechen oder ein CTA, den niemand liest, überzeugt auch niemanden.

Deshalb sehe ich Typografie als Schicht, die UX Fehler, die Umsatz kosten, verhindert. In der Praxis lege ich in einem neuen Entwurf meist zuerst die Schriftskala fest, noch vor den Farben.

Serifenschrift oder serifenlose Schrift: Was passt besser?

Beide Familien funktionieren heute gut für Fließtext am Bildschirm. Hochauflösende Displays haben die Unschärfe, unter der feine Serifen früher litten, weitgehend beseitigt. Die Wahl hängt also weniger von der Technik ab, sondern vor allem vom Charakter der Marke und der Art des Inhalts.

Meine Faustregel lautet deshalb: Für Websites mit vielen Bedienelementen wähle ich eine serifenlose Schrift für den Fließtext. Für inhaltsstarke Seiten nehme ich eine Serifenschrift oder eine gute Hybridform. Entscheidend bleiben dann Laufweite, Mittellänge und die Qualität aller Zeichen, die Ihre Sprache braucht.

Wie kombinieren Sie Schriften auf einer Website?

Bei der Schriftkombination wählen Sie eine Schrift für Überschriften und eine für den Fließtext, die sich ergänzen. Ziel ist Kontrast ohne Konflikt. Die meisten Firmenwebsites brauchen nur zwei Familien; eine dritte lohnt sich meist nur für Code oder einen besonderen Akzent.

So gehe ich dabei vor:

1. Wählen Sie zuerst die Schrift für den Fließtext, denn diese sehen Leser am häufigsten.
2. Suchen Sie danach eine Überschriftenschrift, die auffällt, aber denselben Geist hat.
3. Vergleichen Sie die Mittellängen direkt nebeneinander; große Unterschiede bringen die Seite aus dem Gleichgewicht.
4. Bauen Sie Kontrast nur auf einer Achse auf: Familie, Schnitt oder Größe.
5. Testen Sie schließlich mit echten Überschriften, echtem Text und einem echten Smartphone.

Ein sicherer Start ist also eine variable Schrift in mehreren Schnitten. So vermeiden Sie Konflikte und halten die Zahl der Dateien niedrig. Nutzt Ihre Marke bereits eine Schrift im Druck, erkläre ich die Übertragung im Artikel Corporate Design digital umsetzen.

Welche Schriftgröße sollte der Fließtext haben?

Browser nutzen standardmäßig 16 Pixel für Fließtext, und diesen Wert betrachte ich als Untergrenze. Auf inhaltsstarken Seiten liest sich ein Bereich von 17 bis 19 Pixeln oft angenehmer. Dieser Bereich beruht auf Praxiserfahrung und ist keine Garantie; zudem hängt er von der Mittellänge Ihrer Schrift ab.

Ich empfehle, Größen in rem statt in Pixeln anzugeben. Dann respektiert die Website die Browsereinstellungen der Leser. Außerdem verlangt das WCAG Kriterium zur Textvergrößerung, dass sich Text ohne Verlust von Inhalt oder Funktion auf 200 Prozent vergrößern lässt.

Für Überschriften bauen Sie am besten eine Skala mit festem Verhältnis. Zum Beispiel ergeben sich bei einem Verhältnis von 1,25 über 16 Pixeln die Stufen 20, 25 und etwa 31 Pixel. Das ist eine Beispielrechnung, die nur die Methode zeigt. Auf Mobilgeräten verhindert ein etwas kleineres Verhältnis, dass lange deutsche Komposita überlaufen. Mit der CSS Funktion clamp() gestalten Sie den Übergang dann fließend.

Wie lang sollte eine Textzeile sein?

Die Zeilenlänge bestimmt, wie mühsam das Auge vom Ende einer Zeile zum Anfang der nächsten springt. Das WCAG Kriterium zur visuellen Darstellung empfiehlt auf der höchsten Stufe höchstens 80 Zeichen pro Zeile. Ich halte Fließtext meist bei 60 bis 75 Zeichen; auch das ist Praxiserfahrung und keine feste Regel.

Am einfachsten setzen Sie das in CSS mit max-width in der Einheit ch um. Zum Beispiel erzeugt 68ch eine Spalte mit ungefähr so vielen Zeichen. Somit zieht sich Text auf breiten Monitoren nicht mehr von Rand zu Rand.

Beim Zeilenabstand ist 1,5 bis 1,7 ein guter Startwert für Fließtext. Dasselbe Kriterium empfiehlt einen Zeilenabstand von mindestens 1,5 und deutlich größere Abstände zwischen Absätzen. Überschriften brauchen dagegen einen engeren Wert von etwa 1,1 bis 1,3. Sonst wirken zweizeilige Überschriften auseinandergerissen.

Sollten Sie Laufweite und Wortabstand anpassen?

Die meisten guten Schriften brauchen in Fließtextgröße keine zusätzliche Laufweite. Die Gestalter haben sie bereits für diesen Bereich ausbalanciert. Deshalb ändere ich letter-spacing nur in wenigen Fällen.

• Kurze Labels und Buttons in Großbuchstaben: Ein leicht positiver Wert verbessert die Klarheit.
• Sehr große Überschriften: Ein leicht negativer Wert schließt lockere Lücken.
• Sehr kleiner Hilfstext: Etwas mehr Abstand verhindert, dass Buchstaben verschmelzen.

Hinzu kommt die Barrierefreiheit. Das WCAG Kriterium zu Textabständen verlangt, dass Inhalte erhalten bleiben, wenn Nutzer den Zeilenabstand auf 1,5, den Absatzabstand auf das Doppelte der Schriftgröße, die Laufweite auf 0,12 em und den Wortabstand auf 0,16 em erhöhen. Vermeiden Sie daher Boxen mit fester Höhe. Container sollten mit dem Text mitwachsen.

Warum ist die Unterstützung von Sonderzeichen so wichtig?

Deutsch braucht ä, ö, ü und ß, dazu das große ẞ, falls Sie Überschriften in Versalien setzen. Viele Schriften decken diese Zeichen ab, aber nicht jede in gleicher Qualität. Sobald Ihre Website zudem Türkisch, Polnisch oder Tschechisch anbietet, fehlen bei manchen Familien Zeichen wie ğ, ł oder ř. Dann zeichnet der Browser diesen einen Buchstaben in einer Ersatzschrift, und das Wort wirkt geflickt.

Ich teste jede Kandidatin deshalb mit einem Satz, der alle Sonderzeichen der Zielsprachen enthält. Außerdem prüfe ich Großbuchstaben mit Umlaut, denn deren Punkte stoßen bei engem Zeilenabstand oft an die Zeile darüber. Setzen Sie zudem das lang Attribut auf jeder Seite korrekt. Silbentrennung und text-transform hängen davon ab, und gerade die automatische Silbentrennung hilft deutschen Texten mit langen Wörtern enorm.

Betreiben Sie mehrere Sprachversionen, prüfen Sie jede einzeln. Den größeren Rahmen beschreibt mein Artikel zur SEO für mehrsprachige Websites. Für die Typografie gilt also kurz gesagt: Gehen Sie nie davon aus, dass eine Schrift eine Sprache unterstützt, bevor Sie es gesehen haben.

Wie beeinflussen Webfonts die Ladezeit?

Jeder Webfont ist eine zusätzliche Datei, und der Browser entdeckt sie meist erst nach dem Lesen des CSS. Diese Verzögerung kann Text verstecken oder ihn beim Eintreffen der Schrift springen lassen. Anders gesagt: Web Typografie wirkt sich auf LCP und CLS aus.

Drei typische Probleme sehe ich immer wieder:

• Unsichtbarer Text: Der Browser versteckt den Text, bis die Schrift da ist, und Nutzer sehen eine leere Fläche.
• Layoutverschiebung: Die Ersatzschrift hat eine andere Breite, also verrutschen die Zeilen beim Wechsel.
• Unnötige Datenmenge: Ungenutzte Schnitte und Zeichensätze kosten Hunderte Kilobyte.

Der Leitfaden von web.dev zu Best Practices für Schriften nennt eine um etwa 30 Prozent bessere Kompression von WOFF2 gegenüber WOFF und empfiehlt, nur noch WOFF2 zu nutzen. Um die Wirkung Ihrer Schriftdateien zu messen, folgen Sie dann den Schritten aus meinem Lighthouse Performance Test.

Welchen font-display Wert sollten Sie verwenden?

font-display ist der CSS Deskriptor, der festlegt, was der Browser zeigt, solange ein Webfont noch lädt. Laut web.dev blockiert block den Text 2 bis 3 Sekunden. swap blockiert gar nicht und tauscht die Schrift ein, sobald sie eintrifft. fallback wartet etwa 100 Millisekunden und lässt ein Tauschfenster von 3 Sekunden. optional wartet ebenfalls 100 Millisekunden und bleibt bei Verspätung für diesen Seitenaufruf bei der Ersatzschrift.

Meine Wahl hängt von der Rolle der Schrift ab. Für markenprägende Überschriften nutze ich swap, weil sofort sichtbarer Text am wichtigsten ist. Für Fließtext liefert optional dagegen oft ein ruhigeres Erlebnis: Beim ersten Besuch sehen Leser die Systemschrift, danach greift die Schrift aus dem Cache.

Allerdings verhindert swap allein keine Layoutverschiebung. Weichen die Maße der Ersatzschrift ab, verrutschen die Zeilen trotzdem im Moment des Tauschs. Der nächste Abschnitt zeigt die Lösung. Die technischen Definitionen finden Sie zudem auf der MDN Seite zu font-display.

Wie verhindern Sie Layoutverschiebungen beim Laden von Schriften?

Die Verschiebung entsteht, weil Ersatzschrift und Webfont unterschiedlich breit und hoch sind. Die Lösung besteht also darin, die Ersatzschrift dem Webfont anzugleichen. Innerhalb von @font-face erlauben die Deskriptoren size-adjust, ascent-override und descent-override genau das. Auch web.dev nennt size-adjust als Mittel, um den CLS Effekt zu verringern.

So gehe ich konkret vor:

1. Wählen Sie die ähnlichste Systemschrift; Arial passt zu vielen serifenlosen, Georgia zu vielen Serifenschriften.
2. Schreiben Sie dafür eine eigene @font-face Regel, etwa mit dem Namen „Marke Ersatz“.
3. Gleichen Sie die Breite mit size-adjust und die vertikalen Maße mit den override Werten an.
4. Setzen Sie diese Ersatzschrift in font-family direkt hinter den Webfont.
5. Drosseln Sie dann das Netzwerk in den DevTools und beobachten Sie den Ladevorgang.

Einige moderne Frameworks berechnen diese Werte automatisch. Trotzdem empfehle ich, das Ergebnis selbst zu messen, denn automatische Werte passen nicht immer perfekt.

Was ist Font Subsetting und wie setzen Sie es um?

Beim Subsetting entfernen Sie Zeichen, die Ihre Website nie nutzt, damit die Schriftdatei kleiner ausfällt. Laut web.dev enthalten lateinische Schriften typischerweise 100 bis 1000 Glyphen. Brauchen Sie kein Kyrillisch, Griechisch oder Vietnamesisch, gibt es also keinen Grund, diese Zeichen mitzuliefern.

Allerdings lauert hier eine Falle. Fertige Subsets trennen Latein manchmal in einen Basissatz und einen erweiterten Satz. Deutsche Umlaute liegen meist im Basissatz, türkische oder polnische Zeichen dagegen im erweiterten Teil. Nehmen Sie deshalb beim Subsetting alle Zeichen Ihrer Sprachen auf. Sonst tauschen Sie eine kleinere Datei gegen geflickte Überschriften.

Ich nutze zwei Wege. Erstens hoste ich die Schrift selbst und schneide sie mit einem Werkzeug wie pyftsubset zu. Zweitens teile ich die Schrift mit unicode-range in Abschnitte, sodass der Browser nur die Teile lädt, die auf der Seite wirklich vorkommen. In beiden Fällen prüfen Sie das Ergebnis dann mit Ihrem Testsatz.

Lohnen sich variable Schriften?

Eine variable Schrift bündelt mehrere Schnitte, Breiten oder Neigungen in einer Datei. Mit statischen Schriften laden Sie getrennte Dateien für Regular, Semibold und Bold. Eine variable Schrift deckt dagegen den ganzen Bereich mit einer Datei ab.

Der Vorteil wächst mit der Zahl der Schnitte. Nutzen Sie zum Beispiel 700 für Überschriften, 400 für Fließtext und 600 für Buttons, bedeutet eine variable Datei oft weniger Anfragen als drei statische. Zudem stehen Zwischenwerte bereit: Ein Wert wie 450 lässt hellen Text auf dunklem Grund etwas voller wirken.

Eine variable Schrift ist allerdings nicht immer leichter. Brauchen Sie nur Regular und Bold, bleiben zwei statische Dateien womöglich kleiner. Vergleichen Sie deshalb die echten Dateigrößen. Prüfen Sie außerdem, ob die variable Version alle benötigten Sprachen abdeckt, denn manche Familien liefern sie mit kleinerem Zeichensatz aus.

Sollten Sie Schriften selbst hosten oder Google Fonts nutzen?

Browser teilen ihren Cache nicht mehr zwischen Websites. Folglich ist das alte Argument, Besucher hätten eine Google Fonts Datei von einer anderen Website schon im Cache, weitgehend hinfällig. Auch web.dev beschreibt den Leistungsunterschied als nicht eindeutig und nennt CDN und HTTP/2 als Voraussetzung für gutes Selbsthosting.

Bei den meisten Firmenprojekten hoste ich selbst, und zwar aus drei Gründen. Die Verbindung zu einer zusätzlichen Domain entfällt. Sie kontrollieren das Subsetting vollständig. Und Sie senden keine IP Adressen Ihrer Besucher an einen fremden Server. Gerade der letzte Punkt ist in Deutschland mit Blick auf die DSGVO relevant; das ist ein Risikohinweis und keine Rechtsberatung.

Nutzen Sie dennoch einen externen Dienst, setzen Sie zumindest einen preconnect Hinweis und laden Sie nur die Schnitte, die Sie wirklich brauchen. Eine kritische Schriftdatei können Sie zudem per preload vorziehen. web.dev rät allerdings, preload vorsichtig und nur für ein einziges Format einzusetzen.

Wie verändert sich Web Typografie auf dem Smartphone?

Auf dem Smartphone ist der Bildschirm schmal und die Bedingungen sind rau: Sonnenlicht, Bedienung mit einer Hand, Lesen unterwegs. Deshalb prüfe ich Web Typografie zuerst auf dem Telefon und nicht auf dem Desktop. Den größeren Ansatz erkläre ich im Artikel was ist Mobile First Design.

Einige Punkte bekommen dabei besondere Aufmerksamkeit. Fließtext sollte nicht unter 16 Pixel fallen, denn auf iOS zoomen Formularfelder mit kleinerer Schrift beim Antippen automatisch heran. Die Überschriftenskala sollte zudem enger ausfallen, da eine 48 Pixel Überschrift vom Desktop auf dem Telefon in Zeilen mit zwei Wörtern zerfällt. Achten Sie außerdem auf lange Komposita und setzen Sie overflow-wrap, damit nichts das Layout sprengt.

Auch Tippziele hängen mit Typografie zusammen. Ein kleiner Textlink lässt sich mit dem Daumen schwer treffen. So wird aus einem Lesbarkeitsproblem ein Bedienproblem; etwas mehr Zeilenabstand bei Zeilen mit Links senkt dieses Risiko.

Wie wirken Kontrast und Farbe auf die Typografie?

Selbst die beste Schrift scheitert an schwachem Kontrast. Das WCAG Kriterium zum Mindestkontrast verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Der hellgraue Fließtext, den ich oft in Entwürfen sehe, liegt meist darunter.

Dünne Schnitte verschärfen das Problem. Selbst wenn das berechnete Verhältnis ausreicht, wirkt ein Schnitt mit 300 wegen seiner feinen Striche in der Praxis blasser. Daher gehe ich im Fließtext nicht unter 400.

Bei der Wahl der Farbwerte hilft Ihnen das Tool HTML Farbcodes. Auf dunklem Hintergrund verhindert ein etwas kräftigerer Schnitt oder etwas mehr Laufweite, dass heller Text ausfranst. Und schließlich sollte Farbe nie allein Bedeutung tragen: Kennzeichnen Sie Links zusätzlich mit einer Unterstreichung oder einem anderen Hinweis.

Wie machen Sie aus Typografie ein CSS System?

Wer typografische Entscheidungen Seite für Seite trifft, erzeugt mit der Zeit Wildwuchs. Deshalb verlagere ich sie in jedem Projekt in CSS Variablen. Dann liegen Schriftfamilien, Größenskala und Zeilenabstände an einer einzigen Stelle.

Mein Aufbau besteht meist aus diesen Teilen:

• Familien: je ein Schriftstapel für Überschriften, Fließtext und Code, am Ende eine angepasste Ersatzschrift.
• Skala: fünf oder sechs Stufen vom Fließtext bis zur größten Überschrift, jeweils fließend mit clamp().
• Rhythmus: getrennte Zeilenabstände für Fließtext und Überschriften, dazu ein gemeinsamer Absatzabstand.
• Schnitte: drei feste Werte für Regular, Medium und Bold.

Den größten Nutzen spüren Sie vor allem bei der Pflege. Wechselt die Marke zum Beispiel die Überschriftenschrift, ändern Sie eine Zeile und die ganze Website zieht mit. Zudem nutzen Design und Entwicklung dieselben Namen, also endet die Diskussion, warum eine Überschrift anders aussieht.

Auch die Einheiten zählen. Ich nutze rem für Größen, ch für die Zeilenlänge und Zahlen ohne Einheit für den Zeilenabstand. Somit berechnen untergeordnete Elemente den passenden Abstand für ihre eigene Größe.

Welche Fehler passieren in der Web Typografie am häufigsten?

In den Websites, die ich prüfe, tauchen immer wieder dieselben Fehler auf. Die meisten entstehen an der Schnittstelle zwischen Design und Entwicklung.

• Zu viele Familien und Schnitte: fünf Schnitte laden und zwei nutzen.
• Kein Zeichentest: Sonderzeichen erscheinen in einer Ersatzschrift.
• Feste Pixelgrößen: Die Browsereinstellungen der Leser bleiben unbeachtet.
• Text von Rand zu Rand: Zeilen mit 150 Zeichen auf breiten Bildschirmen.
• Überall Fettdruck: Die Betonung verliert ihre Bedeutung.
• Text in Bildern: Überschriften, die Suchmaschinen und Screenreader nicht lesen.

Der letzte Punkt betrifft auch SEO, denn echte HTML Überschriften helfen Barrierefreiheit und Indexierung. Wie leicht sich Ihr Text liest, zeigt Ihnen zunächst das Tool Lesbarkeit prüfen. Suchen Sie verzierte Buchstaben für ein Social Media Profil, hilft der Schriftgenerator. Verwenden Sie diese Unicode Zeichen allerdings nicht im Fließtext Ihrer Website, denn Screenreader und Suchmaschinen lesen sie nicht als normale Buchstaben.

Wie testen Sie Web Typografie vor dem Livegang?

Text, der im Entwurf perfekt aussieht, verhält sich auf der Live Website manchmal anders. Deshalb mache ich vor jeder Übergabe eine kurze Testrunde. Zunächst öffne ich die Seite auf einem echten Android Smartphone der Mittelklasse und auf einem Laptop. Dann vergrößere ich die Ansicht auf 200 Prozent und suche nach abgeschnittenem oder überlaufendem Text.

Danach drossele ich das Netzwerk in den DevTools und lade ohne Cache neu. So sehe ich, was Leser vor dem Eintreffen der Schrift sehen und ob Zeilen beim Tausch springen. Schließlich prüfe ich den Dunkelmodus, lange Überschriften und Buttons in Versalien. Die Runde dauert selten länger als eine halbe Stunde, fängt aber die meisten peinlichen Fehler ab.

Wie bringen Sie Typografie und Markenidentität zusammen?

Typografie ist die sichtbare Stimme einer Marke. Nutzen eine Anwaltskanzlei und ein App Startup dieselbe Schrift, verlieren beide an Charakter. Deshalb behandle ich die Schriftwahl als Teil der Arbeit an der Markenidentität.

Schreiben Sie zunächst drei Adjektive für Ihre Marke auf, etwa vertrauenswürdig, schlicht und warm. Bewerten Sie dann jede Kandidatin anhand dieser Wörter. So beruht die Entscheidung auf einem gemeinsamen Maßstab statt auf persönlichem Geschmack. Arbeiten Sie in Figma, legen Sie das Ergebnis als Textstile an, wie ich es in Webdesign mit Figma beschreibe.

Logoschrift und Webfont müssen nicht identisch sein. Eine auffällige Displayschrift für ein Logo ermüdet im Fließtext sogar meist. Besser tragen Sie den Charakter des Logos in die Überschriften und nutzen für den Fließtext eine neutrale, gut lesbare Familie. Unterstützung beim visuellen System finden Sie bei meiner Leistung Markenidentität, und wenn Sie die ganze Website nach diesen Prinzipien aufbauen möchten, bei meinem Webdesign.