teilen
twittern
teilen
mitteilen
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 Sie achten sollten und Tipps für die beste Schriftart für Webseiten, erfahren Sie in diesem Artikel.
Schriftarten beeinflussen die Lesbarkeit. Das gilt bei Büchern, aber genauso im Web. Auch wenn eine filigrane Schrift vielleicht Ihren Überschriften Eleganz verleiht, können Sie 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 Ihrer 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 ein wichtiger Faktor. Haben Sie Brand Guidelines, die das Merkmal „Schrift“ genauer definieren, dann sollten Sie diese auch auf Ihrer Website berücksichtigen. Einheitlichkeit und Wiedererkennungswert steht hier noch einmal weiter oben auf der Prioritätenliste. Allerdings kann es sein, dass Ihre 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 Sie dann die beste Schriftart für Ihre Webseiten finden, sollten Sie wieder auf die zwei genannten Dimensionen zurückgreifen.
Technische Vorraussetzungen für die Website-Schriftart
Sie kennen 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. Haben Sie 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 ihre Website-Schrift am Ende auch korrekt und unabhängig von Browser oder Endgerät angezeigt wird. Wir stellen Ihnen hier zwei Möglichkeiten vor, wie Sie die einheitliche Sichtbarkeit Ihrer Schriftart gewährleisten können.
Quelle: Pixabay
Sie gestalten gerade Ihre Website oder planen einen Relaunch und fragen sich: Was kommt alles auf eine Website-Startseite? Wie sollte sie 2021 aussehen? In unserem Artikel zur Website-Startseite haben wir die wichtigsten Inhalte für Sie zusammengefasst. Außerdem erhalten Sie Tipps, was Sie bei der Startseite unbedingt vermeiden sollten. Ebenso erhalten Sie Informationen zum Thema SEO und dem generellen Design der Startseite.
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. Wichtig ist, dass dies in der Datenschutzerklärung der Website aufgegriffen wird.
Die richtige Schrift spielt für Ihren Content – egal, ob auf der Website oder dem eigenen Blog – eine wichtige Rolle. Content Management Systeme haben je nach Anbieter die Möglichkeit, Fonts via Plug-Ins zu integrieren. In unserem Marktüberblick CMS Lösungen haben wir für Sie verschiedene Anbieter miteinander verglichen. Den Marktüberblick können Sie sich kostenfrei herunterladen.
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 Sie Fallbacks im CSS integrieren können:
html {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
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 diese nicht dargestellt werden können), sollten neben technischen Aspekten 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 hinsichtlich der Barrierefreiheit einige Vorgaben, die bis 2025 für Unternehmen verpflichtend werden aber schon 2021 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 erfahren Sie 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 aktuellere Tests wie 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.
teilen
twittern
teilen
mitteilen
Bildquellen
maintenance-2422172_1920: Pixabay
printing-plate-846089_1920: Pixabay
