Die Schrift auf einer Website entscheidet nicht nur über die visuelle Ansprechbarkeit, sondern trägt maßgeblich dazu bei, dass bestimmte Textpassagen gelesen oder ignoriert werden. Daher werden im folgenden Beitrag einige Tipps und Prinzipien angesprochen, die dabei helfen den idealen Font für eine Website zu finden.
Um das Fonts-Prinzip besser verstehen zu können, ist es zunächst nötig sich die Anfänge des World Wide Webs genauer anzusehen.
Zurück zu den Anfängen
Die ersten Websites wurden in den Schriften dargestellt, die die Betriebssysteme mit sich brachten. CSS war (noch) kein Thema. Hinzu kam, dass die Hersteller je unterschiedliche Schriftarten an Board hatten, sodass die Darstellung einer Website vom verwendeten Betriebssystem abhing.
Diese integrierten Schriftarten werden auch heute noch geladen, wenn auf einen Font nicht zugegriffen werden kann.
Diese werden dann allerdings je nach Betriebssystem unterschiedlich interpretiert. Die überschaubare Menge an verfügbaren Fonts, führte darüber hinaus zu der Angewohnheit, benötigte Schriftarten als Bilddatei zu hinterlegen.
Der größte Nachteil dabei ist, dass Text in einem Bild von einer Suchmaschine nicht entdeckt werden kann, sodass zielgerichtete SEO-Arbeit erschwert wird.
Ein schlechter Font ist besser als gar keiner
Erfreulicherweise ist die Technologie seitdem sehr viel weiter vorangeschritten, sodass heute eine große Menge Schriftarten im Web zur Verfügung steht. Dennoch sollte das technische Hintergrundwissen vorhanden sein, falls ein gewünschter Font mal nicht geladen wird. Ein Grund dafür kann eine schlechte Internetverbindung sein, bei der die CSS-Datei erst verspätet geladen wird.
Bevor es nun darum geht die beste Schriftart zu finden, sollte überprüft werden, ob der Text auch angezeigt wird, wenn die CSS-Datei nicht geladen wird. Als Nächstes sollte sichergestellt werden, dass die Seite, sowohl in Sans Serif, als auch in Standard Serif noch lesbar ist. Und auch die Frage, ob ein alternativer Font mitgeliefert wird, ist zu beachten.
Das oberste Prinzip im Web ist die Lesbarkeit von Inhalten. Diese gilt es zu bewahren und sicherzustellen, dass Inhalte einer Seite in jedem Fall (auch bei einem Fallback der Fonts) vermittelt werden können.
Herkunft der Fonts
Wie schon angesprochen, bringt jedes Betriebssystem seine eigenen Standardschriften mit. Hinzu kommt die Möglichkeit, sich eigene Fonts auf dem Computer zu installieren. Demnach kann schwer beurteilt werden, welche Fonts zur Verfügung stehen.
Die Lösung lautet: Web Fonts
Web Fonts, bzw. ein Web-basierter Font Service erlaubt die Einbindung verschiedener Schriftarten auf der eigenen Website. Die Menge an verfügbaren Fonts ist theoretisch unendlich und nur durch das Repertoire des Anbieters beschränkt.
Die bekanntesten Anbieter sind Google Fonts und Adobe Fonts. Sie bieten nicht nur Fonts zum einbetten an, sondern stellen auch die Hosting Plattform für diese bereit. Dabei ist der Service von Google im Gegensatz zu Adobe kostenlos. Jedoch führen verstärkte Datenschutzrichtlinien, gerade in Deutschland, dazu, dass eine Alternative zu Google gesucht wird.
Anatomie der Typographie
Damit die Entscheidung für einen bestimmten Font fallen kann, ist es von Bedeutung die Eigenschaften von Typographien zu kennen. Wichtig ist, dass Paragraphen aus gut lesbaren Schriftarten bestehen sollten, um den Leser nicht zu vergraulen. Ebenfalls sollte darauf geachtet werden, wie sich die Schrift bei Verkleinerung verändert. Nur weil ein Font auf dem Desktop gut lesbar ist, muss er es nicht auch auf dem Mobiltelefon sein.
Doch auch hier gibt es Indikatoren, die bei der Wahl einer passenden Schriftart helfen.
x-Höhe
Die x-Höhe beschreibt die vertikale Höhe des Buchstaben x. Diese sollte nicht zu klein gewählt werden, da sonst die Zugänglichkeit des Textes, vor allem bei kleineren Schriftgrößen, leidet. Auch sollte sie nicht zu groß sein, da sonst die Unterscheidung zwischen Groß- und Kleinbuchstaben schwerer fällt.
Apertures
Das sind die Öffnungen, die in diversen Buchstaben zu finden sind. Je größer sie sind, desto angenehmer sind längere Textabschnitte zu lesen.
Letter Spacing und Kerning
Letter Spacing beschreibt den generellen Abstand zwischen den Buchstaben. Kerning hingegen beschreibt den Abstand zwischen bestimmten Buchstaben. Dieser kann in Abhängigkeit der natürlichen Form eines Buchstaben, unterschiedlich ausfallen.
Durch gleichmäßige Abstände wirkt die Schriftart harmonischer und wird gleichzeitig besser lesbar. Beides lässt sich wunderbar per CSS anpassen.
Ascenders & Descenders
Ascenders und Descenders sind verwandt und meinen die Verlängerungen bei z.B. f, q und j. Diese sollten eher ausgeprägt sein um auch bei längeren Textabschnitten nicht nachteilig zu wirken.
Eine Schriftart, mehrere Stile
Idealerweise sollte eine Schriftart in verschiedenen Stilen und Stärken vorliegen, damit es zu keiner verfälschten Darstellung im Browser kommt.
Obgleich eine fast endlose Fülle an Schriftarten existiert, so lassen sie sich doch in drei gängige Kategorien einordnen. Serif, Sans Serif und Monospace.
Als Richtlinie bei der Vorgehensweise empfiehlt sich, gerade als Anfänger, denselben Font für Body und Headings zu verwenden, jedoch in veränderter Stärke, Buchstaben-Abstand und Größe in den Headings. Eine alternative Herangehensweise bringt die Verbindung von Serif im Body und Sans Serif im Heading mit sich.
Bei fontjoy.com besteht zudem die Möglichkeit, verschiedene Font-Kombinationen im Vorfeld zu testen.
Ausblick
Nicht nur durch verschiedene Typographien lassen sich Variationen erstellen, auch der Einsatz von Farben trägt dazu bei. Schon allein der Hintergrund bestimmt oftmals die Farbe des Textes. Ist er eher dunkler, sollte z.B. eine hellere Schriftfarbe gewählt werden.
Zur Anregung empfiehlt sich, neben der Analyse anderer Websites, auch immer die aktuellen Trends im Blick zu haben. Gewisse Font-Kombinationen wiederholen sich zwar oftmals, jedoch kann es, je nach Projekt, nötig sein auf Bewährtes zurückzugreifen, anstatt das Rad neu zu erfinden.
