Eine effektive Benutzerführung vermittelt Webseitenbesuchern die Information schnell und intuitiv. Das wiederum führt zu einer höheren Zufriedenheit des Besuchers mit der Oberfläche der Webseite. Ein wichtiger Bestandteil einer guten grafischen Benutzerführung besteht u.a. in grafischen Symbolen.

Auch wenn diese Symbole, die auch als Icons bekannt sind, oftmals nur wenige Pixel groß sind, können sie einem für die Conversion wichtigen Element, wie einem Call-to-Action Button, neben der farblichen Gestaltung und der Betextung zusätzlich mehr Aussagekraft verleihen. Denn aufgrund der visuellen Wahrnehmung der Icons auf den Besucher einer Webseite, können diese zusätzliche und oftmals auch stärkere Assoziationen herstellen. Dieses weit verbreitete Gestaltungsmittel findet sich in Navigationen, auf Buttons und funktionellen Bedienelementen wie Sortier- oder Blätterfunktionen wieder. Diese werden als kleine Grafiken im HTML-Code eingebunden, die dann vom Browser des Besuchers, wie im folgenden Beispiel einer Produktübersicht eines Produktes von Kabel Deutschland, geladen werden.

Abbildung 01: Darstellung einer Produktübersichtsseite von Kabel Deutschland und der darin enthaltenen Icons

Wesentlich performanter wäre natürlich der Ansatz, diese Icons über eine einzelne Sprite Grafik zu laden. Eine andere Möglichkeit ist es, dieses Ziel mittels eine sogenannter Icon Fonts umzusetzen. Warum? Weil es möglich ist! Wie? Genau diese Frage soll im weiteren Verlauf dieses Artikel geklärt werden.

Was sind Icon Fonts?

Icon Fonts sind eine noch recht neue und zugegebenermaßen sehr spannende Alternative zur Verwendung von Icons. Nicht zuletzt deshalb, weil die Anforderungen an responsive Webdesigns zunehmend steigen, denn auch Nutzer mobiler Endgeräte benötigen für eine optimale Benutzerführung vollständig skalierbare Icons. Das in diesem Artikel-2-Teiler vorgestellte Icon Font Set »Font Awesome« bietet für mögliche Anforderungen eine relativ große Auswahl an Icons, die leicht erzeugt werden können und zudem frei für private und kommerzielle Projekte zur Verfügung stehen.

Abbildung 02: Anbieter des Icon Font »Font Awesome«

Wer einen Blick auf die mittels dieses Icon Font Sets zur Verfügung stehenden Icons in der folgenden Abbildung wirft, wird schnell erkennen das dieses Set eine sehenswerte Alternative zur Darstellung von Icons darstellt. Ob die für eine Vorteilsbox unverzichtbaren Häkchen, die in Formularen und Produktansichten oftmals notwendigen und hilfreichen Informationsgrafiken, wie das Hilfe- oder Info-Icon, aber auch auf Basis von User Generated Content erzeugten Bewertungen von Produkten oder Services, die mittels Microformats oder Microdata über Sterne immer mehr an Bedeutung gewinnen, sind Beispiele für mögliche Einsatzgebiete in einem modernen Webdesign von heute.

Abbildung 03: Darstellung der Icon Font Symbole von »Font Awesome«

Zu der Sammlung an Font Icons gehört neben dem Base Icon Set, aber auch eine Extended Icon Set welche zudem noch eine paar Piktogramme wie das Facebook- oder Twitter-Icon enthält, welche den Mehrwert eines Icon Font Sets zusätzlichen erhöhen. Welche Vorteile, aber auch welche Nachteile der Einsatz von Icon Fonts mit sich bringt, wird im folgenden Absatz aufgegriffen.

Welche Vorteile haben Icon Fonts?

Nicht zuletzt aufgrund der Entwicklung mobiler Endgeräte wie Tablets und Smartphones ist der Bedarf an mobilen Webseiten gestiegen. Ob auf Basis unabhängiger Plattformen oder auf einer Codebasis und einem responsiven Design, die rasante Verbreitung dieser Endgeräte wie bspw. dem neuen iPad3 oder dem iPhone 4 ein sogenanntes Retina-Display besitzt, welche eine sehr hohe Pixeldichte besitzen und somit herkömmliche Icons relativ unscharf sind und je nach Größte teilweise kaum noch zu identifizieren sind. Laut Apple ist die Pixeldichte der Retina Displays so hoch ist, dass selbst das menschliche Auge die einzelnen Pixel nicht mehr erkennen kann. Eure Sprite-Grafiken werden sich bedanken bzw. die User die diese auf den entsprechenden Endgeräten zu Gesicht bekommen. Aber nicht nur das. Denn mobile werden die meisten Inhalte, sofern nicht unterdrückt, skaliert. Das Problem, diese Skalierung über eine mögliche Zoom-Funktion führt bei herkömmlichen Icons zu einer Verschärfung dieses Problems. Die Icon Fonts hingegen, können genau wie eine gewöhnliche Schrift wie in der folgenden Abbildung 04 sichtbar unendlich skaliert werden, und das ohne dabei an Qualität zu verlieren.

Abbildung 04: Detailansicht eines Icons von »Font Awesome« mit stark vergrößerten Ausmaßen

CSS Eigenschaften die über das Media Queries Modul angeboten werden, werden durch Displays mit dieser hohen Pixeldichte nicht beeinflusst, da hierfür die Viewportausmaße des Browsers relevant sind. Das Retina-Display des neuen iPad3 bspw. besitzt eine Auflösung von 2048 x 1536 Pixeln und laut Hersteller eine 44 % höhere Farbsättigung und beeindruckende 3,1 Millionen Pixel – auf den gleichen 9,7″ wie bisher. Das darunter die Qualität der abzubildenden Icons leidet, ist sicherlich nicht schwer vorstellbar. Der vielleicht wichtigste und offensichtlichste Vorteile ist somit bekannt, der Einsatz von Icon Fonts kann allerdings auch einige Vorteil in Bezug auf die Performance von Webseiten mit sich bringen. Das ist natürlich auch von der Dateigröße des verwendeten und eingebundenen Schriftschnittes abhängig. Je höher die Anzahl der zu verwendenden Icons einer Webseite, je eher rechnet sich der Einsatz Icon Fonts wie »Font Awesome« oder »IcoMoon« (siehe Abbildung 05).

Abbildung 05: Darstellung der Icon Font Symbole von »IcoMoon«

Zudem ist man über das Gestalten der einzelnen Icons mittels CSS wesentlich flexibler. Warum? Weil man bei einer Veränderung des Corporate Designs bspw. sämtliche Icons neu erstellen muss. Bei einer farblichen Änderung, wäre dies innerhalb der CSS-Datei lediglich die Änderungen eines Farbwertes. Hier stehen je nach Grad der Änderung, mehrere Stunden Arbeit eines Grafikers, wenigen Sekunden eines Frontend-Entwicklers in der entsprechenden CSS-Datei gegenüber. Zudem sind der Vielfalt der Gestaltungsmöglichkeiten der Icon-Fonts lediglich Grenzen in Bezug auf CSS gesetzt. Ob Größe, Farbe, Text-Schatten, usw. die Icons sind je nach Unterstützung der verwendeten CSS Eigenschaften beim Icon Font Set »Font Awesome« bis hinunter zum IE7 kompatibel. Wie fast alles, hat allerdings auch der Einsatz von Icon Fonts Nachteile.

Welche Nachteile haben Icon Fonts?

Diese beziehen sich in erster Linie auf die Lizensierung der Icon Fonts. Das heißt, entweder selbst erstellen ;o) oder freie Icon Fonts verwenden. Wer die Kosten nicht müht, der kann auch entsprechende Lizensen erwerben. Am Beispiel des »IcoMoon« Icon Fonts, einem sehr hochwertigen und detailliert ausgearbeitetem Font Seit, würde eine Vollversion mit 60$ zu Buche schlagen. Vorteil, man könnte über 500 Icons einsetzen und könnte sogar auf eine Unterstützung des Icons Fonts auf allen relevanten Browser(versionen) zählen.

Wie werden Icon Fonts eingebunden und wie werden sie mittels CSS gestaltet?

Die Beantwortung dieser Frage erhaltet ihr morgen im zweiten Teil dieses Artikel-2-Teilers zum Thema Icon Fonts.

Über den Autor
Der Autor dieses Artikels Heiko Stiegert arbeitet seit knapp 15 Jahren als Webentwickler und hat sich den Webstandards, der Zugänglichkeit, der Usability und der Suchmaschinenoptimierung von Webanwendungen verschrieben. Zudem veröffentlicht er Fachartikel in Zeitschriften wie dem Webstandards-Magazin (jetzt ScreenGuide), im “WebDesigner” oder aber schreibt Fachbücher wie “CSS-Design – Die Tutorials für Einsteiger” oder “Modernes Webdesign mit CSS – Schritt für Schritt zur perfekten Website”.