Welche Schriften für die Website auswählen?

Gestern war ich im Blumenladen und musste zwei Blumensträuße besorgen: einen für den Geburtstag einer Kollegin und den anderen für den Sonntagsbesuch bei meiner Oma – den einen klassisch, den anderen modern. Für die beiden Damen habe ich versucht, das passende auszuwählen – damit’s eben auch gefällt, nicht wahr? Gestern im Blumenladen, heute auf unserer Website, wähle ich, in diesem Fall aber für unsere Buyer Persona, das passende Webdesign aus. Dazu gehört nicht nur das Layout, sondern ein wesentliches Element einer Website ist die Schrift. Deshalb gebe ich heute ein paar Tipps, welche Schriften man für die Website am besten auswählt!

 

 

Schrift ist nicht nur Mittel zum Zweck!

 

Schrift ist die Basis jedes User Interface, und jeder kommt täglich im Web damit in Kontakt. Vielleicht haben Sie schon eine Hausschrift für Ihr Unternehmen oder sind gerade dabei ein neues Corporate Design inklusive Schrift entwickeln zu lassen. Sehr gut, denn mit Schrift lässt sich schon viel über die Marke sagen, denn Schrift ist ein wesentlicher Baustein eines Markenauftritts. Deshalb die Überschrift: »Schrift ist nicht nur Mittel zum Zweck«, sondern allein mit dem Design der Typografie kann man schon eine Geschichte erzählen. Wählen Sie die Schrift deshalb sorgfältig aus, denn sie sollte in allen Medien, sowohl im Print und Online gut lesbar sein. Außerdem soll sie zu Ihrem Unternehmen und der Branche passen.

 

 

Kleiner Exkurs zu Typografie im Allgemeinen und zu Typografie für Webfonts im Speziellen!

 

Grundsätzlich gibt es zwei Arten von Schriften: Schriften mit Serifen, »Antiqua« und serifenlose Schriften, »Grotesk«, lässt man mal die Schreibschrift außen vor. Doch was ist der Unterschied?

Bei einer Serifenschrift haben die Buchstaben quer zur Grundrichtung eine feine Linie, sogenannte „Füßchen“, sodass das Auge bei der Zeilenbildung unterstützt wird. Diese Abschlussstriche fördern einen guten Lesefluss, da die Buchstaben besser ineinandergreifen. Deshalb sind Serifenschriften wegen der besseren Lesbarkeit besonders gut für Fließtexte geeignet. Soll eine Serifenschrift allerdings auf der Website eingesetzt werden, empfehlen sich mindestens 16 pt, denn sonst „verschwimmt“ die Schrift wegen der Schnörkel und Serifen und die Schrift wird besonders im „Kleingedrucken“ unlesbar. Leider haben die Serifenschriften ein kleines Imageproblem, denn sie wirken oft ein bisschen angestaubt oder konservativ. Aber meiner Meinung nach sind sie gerade deshalb zum Beispiel für Traditionsunternehmen gut geeignet und schaffen schon allein durch die Typografie eine passende Atmosphäre.

Während im Fließtext meist eine Serifenschrift ausgewählt wird, sieht man in Headlines in den meisten Fällen eine serifenlose Schrift. Bei der Kombination von beiden Schriftarten muss man ein bisschen Vorsicht walten lassen, damit die Website insgesamt nicht zu unruhig wirkt. Man sollte maximal zwei, höchstens drei verschiedene Schriften einsetzen. Gut eignen sich deshalb Schriftfamilien, in denen es sowohl Serifen als auch serifenlosen Schriftschnitte gibt. In solchen Schriftfamilien haben die Schriftschnitte dann ähnliche Proportionen und harmonieren miteinander.

Eine serifenlose Schrift, auch als Grotesk bezeichnet, besitzt einfach geformte, schnörkelose Glyphen. Durch diese Geradlinigkeit wirken sie klarer und moderner als Serifenschriften. Dank ihrer Simplizität sind sie auch in kleinen Schriftgrößen sehr gut lesbar. Wegen dieser Universalität werden die Serifenlosen auf Websites gängigerweise sowohl im Fließtext, als auch in den Headlines verwendet. Bei kurzen Bildbeschreibungen oder kurzen Absätzen auf Internetseiten leidet die Lesebarkeit durch den Einsatz von serifenlosen Schriften deshalb nicht.

 

Was sind Webfonts?

 

Mit Webfonts sind Schriften gemeint, die auf der Website dargestellt werden. Früher gab es nur eine kleine Auswahl an sicheren Systemschriften wie Arial, Georgia, Times New Roman, Verdena und Lucida Sans, die für Websites eingesetzt werden konnten, sicher deshalb, weil sie (meistens, ja, es gab auch Ausnahmen) auf allen Computern installiert waren und die Typografie richtig dargestellt wurde. Wenn man eine andere Schrift nehmen wollte, dann hatte man nur die Möglichkeit, diese als Grafik einzubetten. Dies führte zu dem Nachteil, dass die Headlines oder Textabschnitte, die als Grafik vorlagen, nicht für Suchmaschinen optimiert waren, weil die Wörter von den Suchmaschinen nicht erkannt wurden.

Aber heutzutage können wir auf einen weitaus größeren Fundus an Schriften zurückgreifen. Dies ist möglich, da die Schriften nicht mehr lokal auf dem jeweiligen Endgerät installiert sein müssen, sondern mit der Website zusammen auf dem Server liegen oder von einem externen Schrift-Server geladen werden können.

 

 

Welchen Font für die eigene Website auswählen?

 

Es gibt speziell für das Web optimierte Schriften, die dann im Web Open Font Format (WOFF) vorliegen. Dann sind die Leserlichkeit, das heißt ob sich die Buchstaben gut unterscheiden lassen und die Lesbarkeit, das heißt wie gut ein Text lesbar ist, gewährleistet.

 

 

Lesbarkeit ist nicht nur abhängig vom Font, sondern auch vom Fond!

 

Ob Sie nun eine Serifen- oder serifenlosen Schrift wählen: stimmen Sie die Auswahl auf Ihre Zielgruppe ab und bleiben Sie Ihrem Unternehmen treu. Sie muss zu Ihnen passen. Bedenken Sie aber, dass nicht jede Schrift für das Lesen am Screen geeignet ist. Aufgrund der Hintergrundbeleuchtung am Display kommt es manchmal bei schwarzer Schrift auf hellen Hintergründen zu Überstrahlungen, sodass die Schrift rein optisch dünner wirkt und dadurch schwieriger zu lesen ist. Andersherum genauso: Weiße Schrift auf dunklem Hintergrund wirkt oft fetter, als sie eigentlich ist, und wer will das schon?? Zu harter Kontrast führt oft zu einer schwerer Lesbarkeit. Ein dunkles Grau für die Schrift auf einem hellen, nicht ganz weißen Hintergrund ist da schon besser. Vermeiden Sie auch Komplementärkontraste, zum Beispiel Blau-Orange, fängt die Schrift am Monitor an zu flimmern.

 

 

Bessere Lesbarkeit auch durch geeignete Zeilenlänge und Zeilenabstand!

 

Achten Sie darauf wie viele Wörter in einer Zeile stehen – es sollten maximal 70 Zeichen sein. Sind es mehr, leidet die Lesbarkeit des Textes darunter, denn der Anfang der nächsten Zeile ist bei längeren Zeilen schwer zu finden, und wegen des Contents sind Ihre Websitebesucher ja da. Für responsive Websites wird die Zeilenlänge dann zum Beispiel angepasst, indem sie verkürzt wird, wenn weniger Platz, zum Beispiel auf einem Smartphone, zu Verfügung steht. 

Ebenso wie die Zeilenlänge ist der Zeilenabstand von Bedeutung. Je nach verwendetem Webfont muss auch der Zeilenabstand angepasst werden, denn manche Fonts haben zum Beispiel höhere Buchstaben als andere. Für Displays gilt ein Abstand von 145 Prozent bei einer Schriftgröße von 16 Pixel als Empfehlung.

 

 

Welche Schriftgröße für Webfonts?

 

Sie ist abhängig von dem verwendeten Webfont und dessen Proportionen. Als gängige Größe gilt ca. 16 Pixel für den Fließtext. Für die Überschrift H1 gilt in der Regel 2,5 × Fließtextgröße. Die Schriftgröße können auch in relativen Größen (em, er oder Prozent) und nicht starr (Pixel) angegeben werden, da bei einer Veränderung der Browsergröße die Schrift dann flexibel in der Größe angepasst wird.

 

 

Überschriften auf Websites

 

Die H1 ist Ihnen sicherlich schon mal begegnet, wenn nicht auf der Website, dann bestimmt in einem Word-Dokument. Auf Websites kann man die Überschriften (Headlines) genauso strukturieren. Man hat die Auswahl von H1 bis H6, wobei die H1 aus SEO-technischen Gesichtspunkten nur einmal auf jeder Seite vorkommen sollte. Die Suchmaschinen werten die H1 nach ihrer Relevanz im Hinblick auf die Suchanfragen aus. H2 bis H6 sind Zwischenüberschriften, die den Text logisch gliedern sollen, dass heißt der Reihenfolge nach verwendet werden sollten. Ein gut strukturierter Text mit einigen Zwischenüberschriften und sinnvoll gesetzten Absätzen vereinfacht das Lesen ungemein.

 

 

Wie werden Webfonts in die Website integriert?

 

In der sogenannten CSS-Datei (Cascading Style Sheets) werden die Webfonts aufgelistet. Zur Sicherheit gibt man Fallback Fonts (Schriften, die ersatzweise angezeigt werden) oder Default Fonts (Systemschriften) an, falls es Probleme mit dem Server oder der Firewall gibt und die Fonts aus irgendeinem Grund nicht geladen werden können. Leider gibt es einen großen Nachteil: Durch die Verwendung von Webfonts abweichend von den Systemschriften kommt es zu längeren Ladezeiten. Dem kann man entgegenwirken, indem man auf optimierte Kompressionsverfahren für Webfonts (WOFF 2.0) zurückgreift oder nicht benötigte Zahl der Zeichen löscht. Außerdem könnte man bei den Fonts die Schriftschnitte (condensed, bold, kursiv etc.) reduzieren. Manch einer geht deshalb schon wieder back to basics und verwendet zum Vorteil geringerer Ladezeiten extra nur die Systemschriften.

 

 

Fazit

Ich hoffe, ich konnte Ihnen einen kleinen Einblick in die Verwendung von Webfonts auf der Website geben. Für die Umsetzung eines Corporate Design auf der Website sind Hausschriften nämlich genauso wichtig zur Wiedererkennung wie das Logo eines Unternehmens. Mehr zum Thema Branding finden Sie in unserem kostenlosen Branding Guide. Und ich freue mich jetzt auf ein Stück von dem Geburtstagskuchen meiner Kollegin ...

 

Branding Guide

 

 

Britta von Oeynhausen
Als Senior Projektmanagerin Marketing steuerte sie bei vierviertel Inbound- und weitere Marketingprojekte. Sie hat zahlreiche Blogartikel zu interessanten Marketingthemen verfasst und somit den Online-Auftritt von vierviertel maßgeblich mitgestaltet. Ihre Beiträge werden von unseren anderen Autoren stets auf dem neusten Stand gehalten und ergänzt.
Kommentare

Newsflash abonnieren

Unser Newsflash kommt per Mail und bringt aktuelle Marketing-Insights und Neuigkeiten aus der Agentur – immer dann, wenn es etwas wichtiges zu berichten gibt.