Schriften für Ihre Website wählen: Lesbarkeit, Persönlichkeit und Ladezeit

Eine gute Website-Schrift ist zuerst lesbar, dann passend zur Marke und drittens schonend für die Ladezeit. Schriften haben Persönlichkeit – Serifenschriften wirken oft traditionell, abgerundete serifenlose Schriften freundlich –, doch diese Eindrücke sind schwächer, als sie klingen, und Lesbarkeit gewinnt immer. Zwei Schriften, eine Textgröße von mindestens 16 Pixeln und wenige Schriftdateien reichen für die meisten Unternehmenswebsites.

Das Wichtigste in Kürze

• Lesbarkeit schlägt Persönlichkeit: Wählen Sie eine klare Textschrift und legen Sie den Charakter in die Überschriften.
• Verwenden Sie höchstens zwei Schriftfamilien und wenige Schriftschnitte – für ein ruhigeres Bild und eine schnellere Seite.
• Fließtext sollte mindestens 16 Pixel groß sein und großzügigen Zeilenabstand haben.
• Schriften sind Dateien, die jeder Besucher herunterlädt, sie beeinflussen also Geschwindigkeit und Layoutstabilität.
• Dieselben Schriften sollten auf Ihrer Website, in Dokumenten und Präsentationen erscheinen.

Was Schriften vermitteln

Serifenschriften mit kleinen Strichen an den Buchstabenenden wirken eher etabliert und redaktionell. Serifenlose Schriften wirken modern und direkt. Abgerundete Formen wirken freundlich, schmale fette Buchstaben laut. Kanzleien und Beratungen tendieren oft zu Überschriften mit Serifen, Softwarefirmen und Designstudios wählen oft geometrische serifenlose Schriften.

Das sind Tendenzen, und ein guter Designer kann sie bewusst brechen. Sehen Sie Persönlichkeit als Grund, sich zwischen zwei gut lesbaren Schriften zu entscheiden – nicht als Grund, eine schwer lesbare zu akzeptieren.

Lesbarkeit entscheidet

Besucher überfliegen, bevor sie lesen, und jedes kleine Hindernis kostet Aufmerksamkeit. Wählen Sie für Fließtext eine Schrift mit klaren Formen, offenen Abständen und eindeutigen Zeichen, damit ein großes I und ein kleines l nicht gleich aussehen. Stellen Sie mindestens 16 Pixel ein, einen Zeilenabstand von etwa 1,5 und halten Sie Zeilen in einer angenehmen Länge von etwa 50 bis 75 Zeichen.

Auch hier zählt Kontrast. Unser Artikel zur Farbpsychologie behandelt das Verhältnis von 4,5 zu 1 für normalen Text. Setzen Sie Text außerdem linksbündig, denn Blocksatz erzeugt ungleichmäßige Lücken, die das Lesen erschweren.

Kombinationen: bei zwei bleiben

Ein gängiger Ansatz ist eine Schrift für Überschriften und eine für den Text, gewählt für Kontrast. Eine Serifenüberschrift mit serifenlosem Text ist eine klassische Kombination, ebenso umgekehrt. Verwenden Sie eine Familie mit mehreren Schnitten, wenn Sie die sicherste Variante wollen. Mehr als zwei Familien lassen eine Website ungeplant wirken und erhöhen das Downloadvolumen.

Schaffen Sie Hierarchie über Größe, Strichstärke und Abstände, nicht über zusätzliche Schriften.

Schriften und Ladezeit

Jede Schriftdatei, die ein Besucher lädt, kostet Zeit. Jeder Schnitt und Stil ist eine eigene Datei, eine Familie in sechs Schnitten bedeutet also sechs Downloads. Laden Sie nur die Schnitte, die Sie nutzen, bevorzugen Sie moderne Formate wie WOFF2 und hosten Sie die Dateien auf Ihrer eigenen Domain, wo die Lizenz es erlaubt – das spart eine zusätzliche Verbindung zu einem Drittanbieter.

Das Laden von Schriften beeinflusst auch die Layoutstabilität. Wird eine Ersatzschrift nach dem Erscheinen der Seite durch die echte ersetzt, kann Text springen, was beim Cumulative Layout Shift negativ zählt. Googles Grenzwert für einen guten Wert liegt bei 0,1 oder weniger. Wenn die Schrift so eingestellt ist, dass schnell eine Ersatzschrift erscheint, und diese ähnliche Proportionen hat, wird der Sprung kleiner. Unser Leitfaden zur Website-Geschwindigkeit erklärt diese Kennzahlen.

Lizenzen und Konsistenz

Prüfen Sie die Lizenz, bevor Sie eine Schrift einsetzen. Viele Schriften sind unter einer offenen Lizenz kostenlos für das Web nutzbar, andere brauchen eine kostenpflichtige Lizenz, die Websites abdeckt. Bewahren Sie die Lizenzangaben bei Ihren Markendateien auf.

Verwenden Sie dann dieselben Schriften auf Ihrer Website, in Dokumenten, Angeboten und Präsentationen. Wenn ein Programm Ihre Schrift nicht hat, nennen Sie in Ihrem Markenleitfaden eine ähnliche Ersatzschrift. Unser Artikel über Markensysteme erklärt, warum diese Konsistenz Wiedererkennung schafft.

Ein einfaches Rezept

Wählen Sie eine gut lesbare Textschrift und eine Überschriftenschrift oder eine Familie für beides. Setzen Sie Fließtext auf mindestens 16 Pixel mit Zeilenabstand 1,5, laden Sie nur die nötigen Schnitte und testen Sie das Ergebnis auf dem Smartphone. Wenn Sie eine zweite Meinung möchten, prüft unser kostenloses Website-Audit Geschwindigkeit und Layout, und ein kostenloses 30-minütiges Erstgespräch ist der Ort, um über eine Markenauffrischung zu sprechen. Unter Leistungen sehen Sie, wie wir Marke und Website gemeinsam entwickeln.