Was ist ein Webfont und was muss man alles beachten?

Ein Webfont ist eine digitale Schriftart für Webseiten. Diese funktioniert auch ohne Installation und wird auf allen Endgeräten im Web richtig dargestellt. Dazu wird der Webfont im CSS der jeweiligen Webseite korrekt angegeben. Mit den Webfonts steht den Webdesigner mehr Gestaltungsspielraum zur Verfügung und es müssen nicht nur die Systemschriften verwendet werden. Daher sehen heutzutage die Webseiten personalisierter aus als früher, sprich es ist dem Corporate Design der Webseite oder dem Produkt angepasst. Weitere grosse Vorteile von Webfonts sind die gute Lesbarkeit, dass sie skalier- und zoombar sind sowie hochauflösend.

Die wohl bekannteste Schriftenbibliothek für Webfonts ist Google Fonts. Diese Schriften sind kostenlos und funktionieren auf allen Browser unter schneller und unkomplizierter Einbindung. Es hat eine riesige Auswahl an Schriftfamilien und Schriftschnitten. Durch die Filterfunktionen kann man dies einwenig eingrenzen. Findet man einen Font gut so kann man in anwählen – auf der Seite heisst es «Select this style». Es können verschiedene Schriftfamilien gemischt werden und auch nur einzelne Schriftschnitte ausgewählt werden. Am besten man sucht sich Schriften inkl. Schnitte aus, die man auf der Webseite hat. Danach unter «Use on the Web» klickt man @import an und fügt den Code im CSS ein oder nutzt den HTML Code als <link>.

Eine kostenpflichtige Schriftenbibliothek dagegen ist die Adobe Fonts. Hier lässt sich der Programmiercode auch genieren. Man sucht sich auch alle seine Schriftarten aus, die man auf der Webseite braucht und klickt anschliessen «zu Webprojekt hinzufügen». Anschliessend geht ein Pop-Up auf und man kann dem Projekt einen Namen geben, z.B. den Kunden. Danach erscheint der Code und mit dem Copy Symbol lässt es sich ohne auswählen den ganzen Abschnitt kopieren. Nun kann man den Code direkt dem Programmierer weitergeben.

Die Schrift gilt klar als Design-Element und muss zu der restlichen Gestaltung und dem Unternehmen/Marke passen. Bei der Wahl der Schriftart ist immer der wichtigste Faktor die Lesbarkeit. Wenn ein Corporate Design vorliegt sollte man sich daran halten oder zu mindestens was ähnliches suchen damit der Wiedererkennungswert der Marke da ist. Man muss jedoch aufpassen – nicht jeder Webfont eignet sich als Lauftext. Hat man z.B. eine eher verspieltere Schrift im CD definiert, so sollte man diese nur für die Headlines verwenden und für den Lauftext was schlichtes und gut lesbares auswählen.
Als Gestaltungselement werden die Buchstaben meist in Versalien oder sogenannten Grossbuchstaben gesetzt. Bei den Grossbuchstaben sind alle gleich hoch, das ist deshalb für unser Auge komplizierter sich zu orientieren und dauert länger für die Erfassung des Wortes. Die Wörter kommen so alle gleichförmig daher und lassen sich in unserem Gehirn nur schlecht verarbeiten. Daher sollte man sparsam mit Grossbuchstaben umgehen. Viele Webfonts sind daher schlechter lesbar, wenn wir sie in Versalien schreiben. Was sicherlich davon abzuraten ist ganze Lauftexte in Grossbuchstaben zu schreiben.

Bei den Printprodukten ist der Fokus für die Lesbarkeit klar bei den Serifenschriften. Als Serifen bezeichnet man die Anfangs- oder Endstriche bei den Buchstaben, diese dienen dem Leser die Zeilen einfacher im Auge zu behalten. Bei den Webfonts dagegen gelten andere Gesetzmässigkeiten, da diese auf den Bildschirmen konsumiert werden und nicht auf Papier. Oft wirken Serifenschriften im Web oft zu dünn und mit niedriger Bildschirmauflösung wirkt es dadurch verpixelt. Durch das unsere Bildschirme immer besser werden ist das mit jedem heutigen Stand kein Problem mehr. Grundsätzlich werden im Web mehr serifenlose Schriften für Lauftexte verwendet, da man sie moderner findet. Es spricht aber nichts dagegen Serifen- und serifenlose Schriften zu kombinieren. Sprich man hält die Headline in Serifen und den Lauftext in einer serifenlosen Schrift.

Den Webfont muss man nicht nur einbetten oder auswählen können. Viel wichtiger ist die korrekte Anwendung. Es geht darum die richtige Schriftgrösse, Zeilenabstand, Zeilenbreite etc. zu definieren. Am wichtigsten ist auch immer dies auszutesten. Nicht jede Schriftart ist gleich daher sollte man sich nicht blind auf Standardwerte verlassen. Auch das Medium spielt eine wichtige Rolle. Diese Dinge muss man immer Hinterkopf haben. Denn je nach Medium ist auch der Abstand anders. Beim Bildschirm sitzt am mind. 30 cm davon entfernt. Das Handy dagegen hält man in einem kürzeren Abstand zu sich. Doch generell gilt der Richtwert einer Laufschrift im Web von etwa 16 Pixel. Doch probieren Sie dies unbedingt aus! Je nach Mittellänge oder Grösse der Schrift kann dies stark variieren. Weitere Grössen gibt es mit den Überschriften. Das Anwenden von Überschriften (H1, H2, H3) ist nicht nur um den Text zu strukturieren. Denn diese dienen aus technischer Sicht für die Suchmaschinenoptimierung (SEO).

Den Zeilenabstand und den die Zeilenlänge sind stark mit der Lesbarkeit verbunden. Der Bildschirm ist recht breit, daher sollte eine Zeilenlänge gut beachtet werden, ansonsten verliert man die Zeile beim Lesen. Der Lesefluss darf daher nicht abgebrochen werden. Bei der Zeilenlänge beschränkt man sich mac 80 Zeichen pro Zeile. Beim Zeilenabstand ist der Empfehlungswert bei 1.4em bis 1.8em. Das Zusammenspiel ist: Je länger die Zeilenlänge, desto grösser muss der Zeilenabstand sein. Sind alle Faktoren richtig eingestellt muss nur noch der Kontrast stimmen. Als Kontrast bezeichnet man das Verhältnis zwischen Farbe und Hintergrund. Daher sollte darauf geachtet werden, dass die Schriften keinen zu grellen oder zu geringen Unterschied haben.

Beim Schriftkombinationen muss man darauf achten, damit sie zu einander passen. Wenn eine Schriftart aus mehreren Schnitten besteht, kann man diese untereinander mischen. Dabei muss darauf geachtet werden, dass der Duktus einen genug grossen Unterschied hat, damit das Auge dies auch erkennt. Alle Schriftschnitte der gleichen Schrift nenn man daher eine Schriftfamilie. Einige Schriften, sogenannten Schriftsippen verfügen auch über Serifen und serifenlose Buchstaben. Diese lassen sich auch gut kombinieren und harmonieren miteinander. Hier gilt zu beachten, dass die Serifen Schriften eher in den Überschriften zu verwenden sind anstatt als Lauftext.

Achten Sie auf genügend Unterschiede beim Schriften mischen, dies bedeute nicht innerhalb der gleichen Schriftklassifikationen zu kombinieren. Sprich keine Serifenschriften mit anderen Serifenschriften kombinieren und schon gar nicht Schreibschriften untereinander. Mischen Sie daher Schriften mit ähnlichen Strukturen. Für die Strukturwirkung ist vor allem die Art des Striches verantwortlich. Als letzter Punkt gilt nur noch, als Hingucker Element sollte klar die Überschrift sein. Halten Sie daher die Laufschrift eher etwas dezenter ansonsten konkurrenzieren sich die Schriften. Mischen Sie nicht zu viele Schriften, beschränken Sie sich auf zwei Schriftarten.

Haben Sie noch Fragen zu den Webfonts? Ansonsten lesen noch unseren weiteren Artikel über die Zeichensetzung im Web, auf was man da alles achten sollte.