Der Webfont

Hausschrift oder individuell interpretierte Systemschrift? Die Zielgruppe zu definieren hilft bei der Entscheidung.

Geschätzte Lesezeit: 4 Minuten

Sich über die typografische Gestaltung einer Webseite Gedanken zu machen, ist ebenso wichtig, wie die Farbgebung zu planen. Die Harmonisierung der offline CI (Hausschrift) mit dem Onlineauftritt ist wichtig. Heutzutage ist durch die wesentlich schnellere Übertragung von Daten viel mehr möglich als noch vor 15 Jahren. Und CSS3 kann alles in Bezug auf Onlineschriften. Oder?

Den ganzen Tag habe ich dem Thema „Webfonts“ gewidmet. Ich habe zahlreiche Schriften angesehen, habe viele von ihnen in meine Webseite eingebaut und sie getestet. An erster Stelle standen dabei die Google Webfonts, es gab einige sehr schöne Schnitte, die mir gut gefallen haben.

Mein Theme hatte bereits eine vorkonfigurierte Verbindung zu Google Webfonts in der header.php-Datei, die ich ausgeblendet habe. Ich möchte grundsätzlich keine Abhängigkeiten meiner Seite von anderen Servern. Wenn ich eine Schrift über den Server von Google in mein Theme einbette, dann bin ich nicht mehr frei. Außerdem sind die Ladezeiten für eine externe Schrift in der Regel höher als für eine Schrift, die auf meinem eigenen Server zu finden ist. Deshalb habe ich alle Google Fonts, die ich interessant fand, heruntergeladen, und via ein klitzekleines eigenes CSS Script, das ich fonts.css genannt habe, in meine Seite eingebaut. Einige Varianten haben auch wirklich interessant ausgesehen.

So sieht das kleine CSS Script für die fonts.css Datei aus, wenn eine einzelne Schrift im TrueType Format im Unterordner /fonts zu finden ist:

@font-face {
font-family: ‚Meineschrift‘;
src: url(‚fonts/Meineschrift.ttf‘) format(‚truetype‘); }

So sieht die Codezeile aus, die ich in mein Stylesheet einbauen muss, wenn die font.css im gleichen Ordner liegt, wie die style.css:

@import url(fonts.css);

Ich habe schöne Ergebnisse mit heruntergeladenen Googleschriften erzielt. Mir ist aber ein großer Nachteil aufgefallen: Selbst wenn ich alle Schriften über meinen eigenen Server anbiete, und nicht über Fremdanbieter, erhöht sich die Ladezeit für den Text spürbar. Der Test auf dem Smartphone hat es gezeigt: Für Desktoprechner mit Standleitung sind eingebettete Schriften kein Thema, aber für Mobilgeräte sehr wohl. Auch für Laptops mit mobiler Verbindung. Die Wahrnehmungsgeschwindigkeit einer Information ist im Internet extrem hoch, da geht es oft um Sekundenbruchteile. Deshalb habe ich mich ganz heroisch dazu entschieden, auf die traditionellen Systemschriften zurückzugreifen, sie interessant zu definieren und eine Art „Retro-Chic“ als Stilmittel auf meiner Seite zu etablieren. Das Endergebnis gefällt mir ganz gut. Warum kompliziert, wenn es auch einfach geht?

Eine schön gestaltete Übersicht über Systemschriften, die traditionell für Websites genutzt wurden, und die nun langsam aber stetig durch Webfonts ersetzt werden, habe ich auf der Seite von Praegnanz gefunden. Weiterführende Infos über Systemschriften auf Wikipedia.

Für den Fließtext habe ich eine Serifenschrift gewählt. Langjährige Webdesigner werden möglicherweise die Hände über dem Kopf zusammenschlagen, galt doch immer die Maxime: Für Bildschirme niemals eine Serifenschrift als Fließtext definieren, die Bildschirme können kleine Serifen nicht richtig interpretieren. Doch mit den hohen Auflösungen der Displays heutzutage, ob Desktop oder Mobil, ist das meiner Ansicht nach kein Problem mehr. Serifenschriften werden für Print bei Fließtexten immer bevorzugt, da sie flüssiger zu lesen sind. Ich übertrage meine Kenntnisse aus der Printwelt nun ganz frech auf die Onlinewelt und bin auch ganz überzeugt, dass meine Entscheidung funktioniert. Und da die meisten Webadmins serifenlose Schriften auf ihren Webseiten einsetzen, ist das sogar ein besonderes Stilmerkmal, das auffällt.

Bei den Überschriften hadere ich ein wenig: individuelle Headline oder Systemschrift? Doch nachdem ich herausfinde, dass eine eigene Font bei so manchen Tests eine Ladezeit von 1-2 Sekunden hatte (das ist bei Websites eine kleine Ewigkeit), bleibe ich bei der Systemschrift. Nur für das Logo möchte ich etwa Hübsches. Während die Texte bereits sichtbar sind, und der Besucher über die Headlines fliegen kann, kann es sich laden und dann Bäng! nachkommen.

Für diejenigen, die nicht auf die Möglichkeiten einer individuellen Fließtextschrift verzichten wollen, gibt es sowohl Gratislösungen als auch Abonnements. Google Webfonts sind gratis. Wer jedoch eine eigene Hausschrift oder eine Logoschrift hat, die auf der Seite eingesetzt werden soll, oder wer Klassiker liebt, kann sich bei Anbietern von Webfonts registrieren, und wahlweise eine Schrift als Download kaufen oder ein Monatsabo für eine beliebige Auswahl an Schriften abschließen. Ich selbst habe fonts.com getestet, das Angebot ist toll. Typograf Viktor Nübel der selbst Schriften entwirft, empfiehlt myfonts.com. Es gibt darüber hinaus noch viele andere Anbieter. Adobe Fonts beispielsweise. Einfach nach Herzenslust umsehen und ausprobieren.

Teilen Sie Ihre Meinung mit