Heute gibt es mal wieder ein Gastartikel zu einem, wie ich finde, sehr interessanten Thema: Icon Fonts. Welche Vorteile und Einsatzgebiete es hierfür gibt, erfahrt ihr im folgenden Artikel.

Zunächst kurz zu mir: Ich bin Tobias und arbeite beim Testberichteportal reviewzone.de. In unserem Blog schreibe ich über aktuelle Themen aus den Bereichen Technik und Multimedia.

Positive Auswirkungen auf die Conversion Rate

Icons vermitteln den Besuchern einer Webseite Informationen schnell und intuitiv. Sie sind daher ein bedeutendes Element einer benutzerfreundlichen Webseitengestaltung und einer effizienten Benutzerführung.

Obwohl viele Icons nur wenige Pixel groß sind, haben sie oftmals einen großen Einfluss auf die Conversion, da sie beispielsweise die visuelle Wahrnehmbarkeit der Call-to-Action Buttons erhöhen und ihnen mehr Aussagekraft verleihen. Besonders häufig werden Icons für Buttons, funktionelle Bedienelemente wie Sortier- oder Blätterfunktionen, Navigationen oder für Verknüpfungen und Links zu sozialen Netzwerken wie Twitter, Facebook oder Google+ verwendet.

Retina-Displays drängen zur Auflösungsunabhängigkeit

Die Verwendung von Icons führt jedoch immer häufiger zu Problemen. Grund dafür ist die zunehmende Verbreitung von hochauflösenden Bildschirmen mit hoher Pixeldichte, die vor allem für Smartphones und Tablets, inzwischen aber auch schon bei einigen Notebooks und Monitoren verwendet werden. Im Gegensatz zur Schrift, die auf diesen Bildschirmen sehr scharf wirkt, sehen Icons, die meist eine Pixeldichte von 72dpi aufweisen, auf der neuen Bildschirmgeneration verwaschen aus.

Umgehen lässt sich dieses Problem mit der Verwendung von Icon Fonts, denn verglichen mit Grafiken sind Icon Fonts vektorbasiert und somit audgrund ihrer Auflösungsunabhängigkeit die effizientere Methode, Symbole darzustellen. Wie bereits der Name verrät, handelt es sich bei Icon Fonts nicht um Bilder, sondern um Schriftarten, die entweder größtenteils oder komplett aus Symbolen bestehen. Frei für private und kommerzielle Projekte zur Verfügung stehende Icon Font Sets bieten eine relativ große Auswahl an Icons von geläufigen Websymbolen. Als Icon Font Symbol verfügbar sind beispielsweise Häkchen, die in Formularen oder Produktansichten zum Einsatz kommen können, Hilfe- oder Info-Icons oder auch Stern-Icons, die etwa bei Bewertungen von Produkten oder Services zum Einsatz kommen können, wie im folgenden Screenshot zu sehen ist.

Icon Fonts als Stern Icon für Bewertungen

Icon Fonts als Stern Icon für Bewertungen

Hohe Anpassbarkeit, große Auswahl

Der größte Vorteil von Icon Fonts ist die Skalierbarkeit in Abhängigkeit zur Auflösung. Da Icon Fonts, wie eine gewöhnliche Schrift, auf Vektoren basieren und somit ohne Qualitätsverlust unendlich skaliert werden können, ist die Darstellung dieser auch auf hochauflösenden Bildschirmen problemlos möglich. Da zukünftig auch Desktop Rechner hochauflösende Bildschirme verwenden werden, wird die Bedeutung von Icon-Fonts weiter zunehmen.

Ein weiterer Vorteil von Icon Fonts ist, dass auch die Gestaltung der einzelnen Icons, verglichen mit der Gestaltung von Grafiken, mittels CSS (und vor allem mittels CSS3) wesentlich flexibler ist. Eine Farbänderung, die beispielsweise im Zuge der Einführung eines neuen Corporate Desings vorgenommen werden soll, kann innerhalb der CSS-Datei durch eine einfache Änderung des Farbwertes erfolgen. Der Zeitaufwand, den ein Grafiker in die Umwandlung der Grafiken investieren müsste, wäre deutlich höher. Wie vielfältig die Icon-Fonts hinsichtlich Farbe, Größe oder Schattenwurf gestaltet und wie schnell und einfach Änderungen vorgenommen werden können, macht die Icon Font Seite von CSS-Tricks ersichtlich. Dank Features wie CSS-Animationen, Hover-Effekten oder Verläufen, können aus den Fonts ansprechende und komplexe Icons werden.

Des weiteren erhöht der Einsatz von Icon Fonts die Performance einer Webseite. Dies trifft besonders dann zu, wenn zuvor viele Grafiken verwendet wurden.

Wo ist der Haken?

Den Vorteilen der Icon Fonts stehen ein paar Nachteile gegenüber. So können sie nicht mehrfarbig gestaltet werden. Zudem benötigen die Schriftarten mehr Speicherplatz, da mehrere Dateien in verschiedenen Formaten gebraucht werden, um die Icon Fonts in allen Browsern und auf allen Betriebssystemen darstellen zu können. Ein weiteres Problem besteht darin, dass die Icon Fonts von Sreenreadern und Suchmaschinen lediglich als normaler Text wahrgenommen und nicht als Symbol erkannt werden. Auch ist das Erstellen einer eigenen Icon-Schriftart sehr schwierig.

Icon Fonts können unter anderem über weloveiconfonts.com bezogen und über CSS eingebunden werden. Ein schönes Tutorial zum Einbinden von Icon Fonts gibt es übrigens hier.

Die Zukunft der Icons?

Abgesehen von den positiven Effekten von Icon Fonts auf die Conversion Rate steht ein Vorteil der Symbolschriftarten ganz klar im Vordergrund: die Auflösungsunabhängigkeit. Während Betriebssysteme wie Windows, Mac OS X, Android oder iOS bereits seit längerer Zeit vektorbasiert oder zumindest für hohe Auflösungen optimiert sind, hinkt das Netz noch hinterher. Die gängigen 72dpi reichen aufgrund zunehmend höherer Pixeldichten bei Panels in Smartphones, Notebooks und Monitoren von über 300dpi schlichtweg nicht mehr aus. Wer für hochauflösende Displays wie im Galaxy S4, iPhone 5, MacBook Pro Retina oder Chromebook Pixel sowie für die kommende Generation von 4K-Bildschirmen gewappnet sein möchte, muss entweder auflösungstechnisch aufrüsten oder direkt auf auflösungsunabhängige Elemente setzen. Icon Fonts sind hier zumindest im Bereich der Symbole eine hervorragende Lösung: Sie sind nicht nur wesentlich performancefreundlicher als hochaufgelöste Grafiken, sondern aufgrund ihrer unendlichen Skalierbarkeit auch für sämtliche Bildschirmgenerationen gerüstet.