Was sind Webfonts und wozu braucht man sie?

Webfonts sind stringente Elemente einer Website, da sie sich überall wiederfinden – ob in der Navigationsleiste, Bildunterschrift oder in Blog-Artikeln. Ein falscher Einsatz führt schnell zu hohen Jump Rates, was langfristig die gesamte Performance beeinflussen kann.

Daher sollten bei der Wahl der passenden Webfonts und Webtypografie einige grundlegende Faktoren beachtet werden, die wir für Sie zusammengefasst haben.

Webfonts und ihr wichtiger Nutzen

In den Anfangsjahren des Webdesigns hatten Gestalter lediglich eine Handvoll Fonts wie Arial und Times New Roman zur Auswahl. Mit wachsender Bedeutung und Professionalisierung von Webseiten-Gestaltung kamen zahlreiche Webfonts hinzu. Mit dieser deutlich höheren Vielfalt an Fonts können Corporate-Design-Richtlinien nun deutlich besser und individueller durchgesetzt werden als noch zu Zeiten von Arial und Co.

So kann die übergreifende Markenstrategie konstant verfolgt werden, was enorm wichtig für die Corporate-Identity-Verfestigung in den Köpfen der User und Kunden ist. Die dem Firmen-Styleguide entsprechende Webschrift kann einfach in den Stilvorlagen der Website, dem CSS, definiert und von einem Server heruntergeladen werden.

Der User muss also keine vorgefertigten Schriftarten auf seinem Endgerät installiert haben, um Webfonts darstellen zu können. Es ist eines der Kernmerkmale von Webfonts, dass sie nicht auf dem lokalen Server des Nutzers befinden müssen, sondern extern bezogen werden.

Die Wahl der idealen Webtypografie: Serifen – ja oder nein?

Serifenschrift – Serifenlose Schrift

Während eine Schrift der serifenlosen Font Family sehr schlicht und clean daherkommt, ist die Serifen-Schrift „verziert“ mit Schnörkeln. Besagte Schnörkel nennen sich in der Fachsprache „Serifen“. Die wohl bekannteste serifenlose Schrift ist eine der Fallback Fonts, „Sans Serif”, die überall als Alternative angezeigt werden kann, sollte eine Font auf dem Endgerät nicht verfügbar sein.

Eine ungeschriebene, aber bislang etablierte Gesetzmäßigkeit lautet, dass Serifen-Schrift für Print (Zeitungen, Bücher etc.) und serifenlose Schrift für die Online-Welt verwendet wird. Das liegt daran, dass Print meist lange Fließtexte beinhaltet. Diese können besser mit dem Einsatz von Serifen rezipiert werden, da sie dem menschlichen Auge Orientierung bieten. Durch die obigen Serifen-Striche entsteht eine Art Linie, anhand der sich der Lesende unterbewusst orientieren kann. Eine solche Orientierungshilfe ist beispielsweise auf einer Homepage einer Website nicht nötig, da diese meist deutlich weniger Text enthält.

Außerdem wirkt serifenlose Schrift zeitgemäßer, sodass viele Unternehmen sie auch dem modern-innovativen Touch wegen verwenden. Alteingesessene Unternehmen können also im Umkehrschluss Serifen-Schrift verwenden, um ihr Image als geschichtsträchtigen Betrieb zu untermauern. Da Konventionen jedoch gern gebrochen werden, ist ein derzeitiger Webdesign-Trend die Verwendung von Serifen-Schrift bei Unternehmen, deren Corporate Identity nicht für Vintage und traditionsreich steht. Diesem Kontrast wegen wirkt sie dann aber außergewöhnlich und verleiht zum Beispiel einer Headline einen atmosphärischen Touch.

So können Sie Webfonts richtig einbinden

Schriftgröße

Die Schriftgröße ist stark abhängig von der eingesetzten Webfont. Allerdings sollten Sie bei allen Fonts relative Schriftgrößen einsetzen. Denn: Moderne Browser erlauben es dem Nutzer, die Größe nach dessen Wünschen zu verändern, sodass Sie auf starre Schriftgrößen, die sich nicht automatisch anpassen, verzichten sollten.

Beispiele für relative Schriftgrößen sind grobe Einteilungen in Small/Medium/Large oder EM/RM, das in Prozent angegeben wird. Die Größe der H1-Überschrift richtet sich nach der des Fließtextes. Als Richtwert gilt ein ungefähres Verhältnis zwischen H1 und Text von 2,5.

Zeilenabstand

Der Abstand der Zeilen variiert je nach Textform und -aufbau, sodass es keine klaren Vorgaben gibt. Als grober Anhaltspunkt gilt aber der Wert von 1,46em als typografische Maßeinheit, der dem sogenannten goldenen Schnitt entspricht.

Eine weitere Faustregel: Wenn sie sich für einen relativen Abstand entscheiden, empfiehlt sich bei einer Schriftgröße zwischen 9 und 12 ein Wert von 120 Prozent der Schriftgröße.

Zwar sind solche Anhaltspunkte hilfreich, doch müssen Sie sich nicht immer an starre Richtwerte halten: Mit einem gewissen intuitiven Gefühl für Webtypografie kann der Zeilenabstand auch individuell mit Blick auf den Text eingestellt werden.

Schriftfarbe und Hintergrund

Schlechte Lesbarkeit

Gute Lesbarkeit

Um sich von der Menge abzuheben, mögen von der Norm abweichende Schriftarten und Hintergründe zwar gerne eingesetzt werden, doch ist ein solches Vorgehen gerade bei einem Fließtext schwierig.

Eine hellgraue Schrift auf dunkelgrauem Hintergrund mutet zwar modern und ästhetisch an, doch behindert es gerade bei Fließtexten den entspannten Lesefluss, da ein klarer Kontrast fehlt. Gerade für Leser mit eingeschränktem Sehvermögen ist es schwierig, einen solchen Text zu lesen. Auch äußere Umstände wie Lichteinfall erschweren das Lesen hellerer Schriftfarben. So gilt der Grundsatz: Hell-Dunkel-Kontrast ist am einfachsten und vor allem barrierefrei zu lesen.

Neben dem Aspekt der Lesbarkeit spielt außerdem die Farbcodierung eine Rolle bei der Wahl der Schriftfarben und des Hintergrunds. Die Farbe Rot suggeriert beispielsweise eine gewisse Dringlichkeit oder Gefahr, die bei einem Text mit fröhlicher Tonalität fehl am Platz wäre.

Eine durchdachte und professionell umgesetzte Webtypografie ist unabdingbar für das Branding einer Marke. Wie die Festlegung von beispielsweise Corporate Colors ist auch die Wahl der Webfonts elementar für das Unternehmensdesign und die Etablierung der Brand Identity. Aber auch technische Aspekte wie Ladezeit und Auflösung werden positiv von websicheren Schriftarten beeinflusst, da sie bei jedem User gleich und unabhängig vom Endgerät dargestellt werden.

Bis heute gibt es jedoch leider noch einige Ausnahmen an Webfonts, die nicht stringent auf allen Geräten angezeigt werden. Daher sollten Sie sich im Vorfeld genau über die Webfont ihrer Wahl und deren Verfügbarkeit informieren. Webfonts richtig einzubinden bedeutet gleichzeitig auch zusätzliche Details wie die Schriftfarbe zu beachten. Nur so schöpfen Sie das volle Potenzial der Webfonts aus und beeinflussen Ihre gesamte Performance positiv. Um sich einen Eindruck der großen Auswahl an Webfonts zu machen, können Sie einen Blick in den beliebtesten Open Source Font-Anbieter Google Webfonts werfen.

Header: Bablab / iStock / Getty Images Plus