Webfonts – Do’s and Don’ts
Die Zeiten wo Designer sich mit den Standard-Systemschriften begnügen mussten, sind schon lange vorbei. Dank @font-face können unzählige Webfonts ganz einfach per CSS eingebettet werden. Es reicht dem Browser zu sagen welche Webfont benutzt werden soll und woher er sie bekommt.
Auf unzähligen Seiten werden Fonts zum Download angeboten – kostenlos oder kommerziell. Darüber hinaus gibt es noch so genannte Webfont-Dienstleister. Diese Übernehmen nicht nur das Hosting der Fonts, sondern auch die Einbindung. Einige bieten sogar Plugins für Content-Management-Systeme wie WordPress oder Joomla an.
Kostenlose Webfonts:
Kommerzielle Webfonts:
Webfont-Dienstleister
Bitte mit SCHARF!
Die Darstellungsqualität der Schrift wird hauptsächlich von drei Faktoren beeinflusst. Dem Antialiasing Modus, dem Betriebssystem und dem Browser. Beim Antialiasing Modus hat sich mittlerweile das moderne Subpixel-Antialiasing durchgesetzt. Seit Windows Vista und Mac OS X ist diese Funktion standardmäßig aktiviert.
Mit Core Text erzeugte Schrift wirkt immer Fetter und weniger scharf, was besonders auf Mac gestalteten Webseiten mit Light- und Thin-Schnitten Probleme verursacht. Auf Windows-Systemen werden solche Schriften dann schnell unleserlich. Eine Möglichkeit, dieses Problem zu umgehen wäre die Verwendung der CSS-Eigenschaften ” -webkit-font-smoothing: antialiased” und “-moz-osx-font-smoothing: grayscale”. Vorteil hierbei ist, dass die Schrift auf demMac dünner wirkt, jedoch wird gleichzeitig das Subpixel-Antialiasing deaktiviert, was den Text wiederum verschwommen wirken lässt.
Der Fout Bug
Wie jeder andere Content auch, benötigen Fonts eine gewisse Ladezeit. Safari und Chrome blendet den Text erst ein wenn er zur Gänze geladen ist (im Interne Explorer bleibt gleich die gesamte Seite weiß bevor die Schrift geladen wurde). Firefox hingegen stellt den Text in der vorhandenen Fallback-Schriftart (eine auf dem System installierte Standard Schriftart wie Arial oder Verdana) dar, um in später in Hundertstelsekunden gegen die gewünschte Font auszutauschen. Dieser – je nach Internetverbindung – störende Effekt fird FOUT (Flash Of Unstyled Text) gennant.
Fonts welche durch fremdgehostete Anbieter eingebunden werden, sind hier eine gute Möglichkeit, den Fout Effekt zu vermeiden. Beispielsweise Google Fonts oder Typekit können per javaScript auf die Seite eingebunden werden. Dadurch wird bei jedem Aufruf des <html> Elements automatisch eine Klasse .wf-loading hinzugefügt. Nach erfolgreichem Laden der Schriften wird sie durch die .wf-active Klasse ersetzt.
Gute und schlechte Fonts
Nicht nur das Design macht ein Font-Paket aus. So passiert es immer wieder, dass bei vielen kostenlosen Schriften Umlaute und Sonderzeichen nicht enthalten sind. Auch fehlen bei kostenlosen Fonts oft die fetten und kursiven Schnitte. So passiert es dann, dass Text welche auf der Seite als bold oder italic ausgezeichnet ist, verzerrt oder verbreitert dargestellt wird. Der Browser versucht so, den fehlenden Schriftschnitt zu simulieren. Dies liefert in der Regel keine zufriedenstellende Lösung.
Fallback-Fonts
Eingebettete Webfonts variieren in ihrer reellen Größe weitaus mehr als System-Schriften. Aus diesem Grund sollten Sie die Webseite auch mit ein oder mehreren Fallback-Fonts testen und Größenunterschiede mit “font-size-adjust” ausgleichen.
Fazit
Durch die mittlerweile recht simple Einbettung von Webfonts gilt es fast schon als Design-Fauxpas, wenn man als Designer eine Standardschriftart benutzt. Jedoch gibt es immer noch sehr häufig, aus unterschiedlichsten Gründen, diverse Darstellungsprobleme. Gerade bei Fließtext empfiehlt es sich daher, die Webseite auf allen möglichen Geräten, Betriebssystemen und Browsern zu testen.
