Was ist die beste Schriftart für Webseiten? – Die wichtigsten Facts

Die Wahl der Typographie für die Präsenz im Web hat einen großen Einfluss auf das finale Webdesign und sollte neben Bildern, Grafiken und Co. nicht unterschätzt werden. Dabei müssen neben den gestalterischen auch technische Aspekte berücksichtigt werden. Worauf Du achten solltest und welche Tipps für die beste Schriftart für Webseiten wir für Dich haben, erfährst Du in diesem Artikel.

Schriftarten beeinflussen die Lesbarkeit. Das gilt bei Büchern, aber genauso im Web. Auch wenn eine filigrane Schrift vielleicht Deinen Überschriften Eleganz verleiht, kannst Du damit Lesern das Erfassen dieser erschweren. Im Webdesign hat das Thema Fonts einen hohen Stellenwert. Denn die richtige Schrift ist und bleibt ein ausschlaggebender Punkt für das Design Deiner Website. Doch welche Schriftarten sind im Web geeignet? Und welche ist die beste Schriftart für Webseiten?

Die beste Schriftart für Webseiten: Zwei Dimensionen zu berücksichtigen

Bevor wir ans Eingemachte kommen, eine Begriffserklärung: Ein Font ist in der Informationstechnik ein digital vorliegender Schrifttypensatz. Spricht man also von Schriftarten im Kontext vom Webdesign, wird der Begriff Font des Öfteren fallen.

Grundsätzlich kann man die Frage nach der besten Schriftart für Webseiten in zwei Dimensionen aufteilen. Erstens: Welche technischen Gegebenheiten müssen vorhanden sein? Und zweitens: Worauf ist bei der Gestaltung acht zu geben?

Abseits dieser allgemeinen Dimensionen ist bei der Wahl der besten Schriftart für Webseiten aber auch das Corporate Design (CD) ein wichtiger Faktor. Hast Du Brand Guidelines, die das Merkmal „Schrift“ genauer definieren, dann solltest Du diese auch auf Deiner Website berücksichtigen. Einheitlichkeit und Wiedererkennungswert steht hier weiter oben auf der Prioritätenliste. Allerdings kann es sein, dass Deine Markenschrift nicht in jedem Browser richtig angezeigt werden kann. Im Webdesign ist es daher wichtig, alternative Schriftarten für solche Fälle im HTML-Code anzugeben. Damit Du dann die beste Schriftart für Deine Webseiten findest, solltest Du wieder auf die zwei genannten Dimensionen zurückgreifen.

Technische Vorraussetzungen für die Website-Schriftart

Du kennst das vielleicht: Schon beim Versenden eines Textdokuments von Windows auf macOS können erste Probleme aufkommen. Formatierungen verschieben sich, Grafiken sind verzerrt und die Schrift sieht anders aus. Dieses kleine Beispiel lässt erahnen, dass das Verwenden von Schriftarten auch im Web kein Kinderspiel ist. Denn so einfach, wie man heutzutage Schriften in einem Textdokument oder sogar in einer Mail wählen und ändern kann, ist es im Webdesign leider nicht.

Die erste Hürde ist es, die Schrift sichtbar zu machen. Hast Du ein CD mit einer festgelegten Schriftart, kann es hier, wie erwähnt, bereits zu technischen Problemen in der Darstellung kommen. Selbiges gilt natürlich auch für alternative Schriftarten. Die zweite Hürde ist, dass die Website inklusive der gewählten Fonts über jeden Webbrowser und jedes Betriebssystem gleich aussieht. Bei den technischen Voraussetzungen gibt es also einiges zu beachten, damit Deine Website-Schrift am Ende auch korrekt und unabhängig von Browser oder Endgerät angezeigt wird. Wir stellen Dir hier zwei Möglichkeiten vor, wie Du die einheitliche Sichtbarkeit Deiner Schriftart gewährleisten kannst.

1. Websichere Schriftarten

Der traditionelle Weg für eine sichtbare und einheitliche Schrift führt über sogenannte websichere Schriftarten. Auf Computern, Mobiltelefonen, Smart-TVs und Co. sind mehrere Schriftarten vorinstalliert. Verwendet eine Website eine dieser vorinstallierten Schriften, wird diese vom Gerät abgerufen. Problematisch wird es, wenn eine Schriftart verwendet wird, die nicht auf dem Endgerät installiert ist. In diesem Fall greift die Website auf generische Schriftarten zurück. Im Worst Case Szenario führt dies dazu, dass der Text nicht zu entziffern ist. Der Begriff der websicheren Schriftarten führt dementsprechend alle Fonts zusammen, die auf der Mehrheit der Betriebssystemen vorinstalliert sind. Beispielhaft kann man hier Arial (PC) bzw. Helvetica (Mac) oder Times New Roman (PC) bzw. Times (Mac) nennen. Insgesamt ist die Auswahl jedoch stark limitiert.

2. Webfonts

Auch Schriftarten, die auf keinem Endgerät vorinstalliert sind, können via Webfonts in das Webdesign integriert werden. Diese Schriftarten sind ebenfalls sicher – wenn auch nicht „websicher“. Ein prominentes Beispiel eines Webfont Anbieters ist Google Fonts. Google Fonts ist anders als viele andere Anbieter Open Source und somit kostenfrei. Die Anwendung bietet eine Auswahl von über 1.000 Schriftarten für den Text einer Website, die als Code Snippets in die Style Sheets (CSS) eingebunden werden können. Will man den Code umgehen, gibt es beispielsweise bei WordPress ein Plug-In, dass direkten Zugriff auf Google Fonts und somit eine einfache Integration in das Webdesign ermöglicht. Anstelle vom Endgerät, wie es bei websicheren Schriftarten der Fall ist, werden die Schriftarten von Google Servern geladen. Ein Vorteil von Google Fonts ist die riesige Auswahl an verschiedenen Schriften, die eine individuelle Gestaltung gut ermöglichen. Negativ hervorzuheben ist jedoch, dass Daten der Website-User an Google übertragen werden. Dabei ist es wichtig, dass dies in der Datenschutzerklärung der Website aufgegriffen wird.

Sicherheitsnetz Fallbacks

Egal ob websichere Schriftart oder Webfonts – Fallbacks im Stylesheet (CSS) sorgen für extra Sicherheit. Kann auf Font 1 nicht zugegriffen werden, wird Font 2, bzw. der nächstliegend mögliche Font verwendet. Fallbacks minimieren dementsprechend das Risiko eines unlesbaren sowie optisch unansprechenden Textes.

Im folgenden haben wir ein Beispiele eingefügt, wie Du Fallbacks im CSS integrieren kannst:

1. html {

2.     font-family: Verdana, Helvetica, Arial, sans-serif;

3. }

Sollte Font 1, hier Verdana, nicht vorinstalliert sein, wird Font 2, hier Helvetica genutzt. Ist dies nicht möglich wird Font 3, Arial, genutzt. Funktioniert auch Arial nicht, greift die Website gemäß dem Style Sheet auf eine andere serifenlose (sans-serif) Schrift zurück.

Gestalterische Aspekte

Hat eine Unternehmung keine vorgegebene Schriftarten in ihren Brand Guidelines vermerkt (oder wenn diese nicht dargestellt werden können), sollten neben technischen Aspekten auch gestalterische berücksichtig werden. Eine geschlossene Außenwirkung mit einheitlichem Design strahlt Souveränität sowie Professionalität aus. Wichtig ist, dass die gewählte Schrift der Texte zu dem Image des Unternehmens passt. Dabei ist es durchaus möglich, verschiedene Fonts für verschiedene Texte zu verwenden. Dies kann Aufmerksamkeit generieren und dem Webdesign das gewisse Etwas verleihen. Es sollte jedoch darauf geachtet werden, dass die Grenze von drei Schriftarten nicht überschritten wird. Darüber hinaus sollte es für die Verwendung der Schriften eine klare hierarchische Ordnung geben. Beispielsweise könnte den Überschriften und dem Fließtext je eine Schrift zugewiesen werden. Hinsichtlich Größe, Zeilenabstand und Farbe liegt eine gute Lesbarkeit im Fokus. Hier gibt es in Puncto Barrierefreiheit einige Vorgaben, die bis 2025 für Unternehmen verpflichtend werden, aber schon 2023 einige Vorteile mit sich bringen. So wird eine barrierefreie Website in SEO etwas besser gerankt. Mehr über die genauen Vorgaben und die positiven Effekte für SEO erfährst Du in unserer Checkliste zur Erstellung barrierefreier Websites.

Serife: Ja oder Nein?

Bekannte Serifenschriften, auch Antiqua genannt, sind zum Beispiel Times New Roman oder Baskersville. Serifen bezeichnen kurze, dünne Striche am Anfang wie Ende eines Buchstabens. Lange Zeit galten diese Schriften als besonders gut lesbar, unter anderem, da Serifen einem Fließtext mehr Führung geben sollten. Ein Grund, warum Schrift mit Serifen heute in vielen Tageszeitungen und Büchern zu finden ist und mit diesen assoziiert wird. Diese Annahme wurde jedoch vor einigen Jahren von Martin Liebig widerlegt. In einem Test an der FH Gelsenkirchen mit über 3000 Teilnehmern hat Liebig verschiedene Schriften untersucht. Dabei konnten keine deutliche Unterschiede hinsichtlich der Lesbarkeit von verschiedenen Schriftarten, egal ob mit Serifen oder serifenlose, festgestellt werden. Lediglich bei besonders kleinen Texten, beispielsweise bei Bildunterschriften, haben sich Serifenschriften als weniger gut lesbar herausgestellt. Auch weitere Tests wie der von Gina Peschkes aus dem Jahr 2017 bestätigen Liebigs Ergebnisse. Grundsätzlich kann man sagen, dass Grotesk-Schriften, also serifenlose Schriften wie Arial, moderner und alltäglicher wirken. Serifenschriften wirken aufgrund ihrer hohen Frequenz im Print meist erwachsender und seriöser.

Lesbarkeit als oberste Priorität

Hat man sich für eine technische Variante entschieden, sollte der Fokus hinsichtlich der Gestaltung voll und ganz auf der Lesbarkeit liegen. Wählt man zwischen Times, Georgia, Arial, Trebuchet und Verdana, alles websichere Schriften, die laut Liebigs Studie ähnlich gut lesbar sind, kann die Wahl der Schrift dem Stil der Website anpasst werden. Entscheidet man sich für eine andere Schrift, ist es wichtig, diese zunächst auf ihre Lesbarkeit hin zu untersuchen. Wenn dies garantiert ist steht dem Font nichts mehr im Wege.