In meinen letzten Beiträgen über SVG-Grafiken und hochauflösenden Bildern auf Webseiten habe ich mich bereits eingehend mit Möglichkeiten befasst, Webseiten durch den Einsatz von hochauflösenden Grafiken zukunftssicher zu machen. In diesem Beitrag über Icon-Fonts, werde ich die bereits beschriebenen Möglichkeiten durch ein weiteres, sehr interessantes Verfahren erweitern.
Hintergründe
Icon-Fonts basieren auf einer simplen Idee: Schriftzeichen sind grundsätzlich nichts anderes, als vektorbasierte Grafiken. Der Buchstabe „B“ z.B. kann als Aneinanderreihung von Punkten verstanden werden, die durch Kurven und Geraden miteinander verbunden sind. Wir benutzen also schon seit dem Beginn des Internets vektorbasierte Grafiken auf unseren Webseiten.
Icon-Fonts versuchen genau diese Idee aufzugreifen: Anstatt Buchstaben in einem Font zusammenzufassen, können bei Icon-Fonts, vektorbasierte Grafiken in einen Font gepackt werden. Dies hat enorme Vorteile und nur einige wenige Nachteile, auf die ich kurz Eingehen möchte.
Vorteile
Eine der der größten Vorteile der Icon-Fonts liegt in der Kompatibilität. Da die Unterstützung für Webfonts sogar bis auf Version 5.5 des Internet Explorers zurückgeht, kann man diese im Gegensatz von z.B. SVG-Grafiken uneingeschränkt auf allen heute im Einsatz befindlichen Browsern einsetzen. Der Font wird also, egal wie hoch die Auflösung des Bildschirmes ist, scharf gerendert.
Weitere Vorteile die sich durch den Einsatz von Icon-Fonts ergeben: Der Font kann ganz einfach mit normalem Text kombiniert werden, um so z.B. die beliebte Kombination aus Icon + Text z.b. im Header zu bilden. Da der Browser den Icon-Font wie Text behandelt, können solche Kombination ganz einfach z.B. auch zentriert werden.
Ein weiterer großer Vorteil: Der User kann dem Icon durch das CSS-Attribut color ganz einfach unterschiedlichste Farben geben. Auch Farbänderungen bei :hover und CSS3-Transitions sind damit ganz einfach möglich.
Nachteile
Natürlich gibt es immer auch einige Nachteile, die sich beim Icon-Font allerdings in beschaulichen Grenzen halten. Die größte Einschränkung: Icons und Grafiken müssen einfärbig sein – es können also keine unterschiedlich-farbigen Bereiche definiert werden. Hat man sich mit dieser Einschränkung abgefunden, gibt es eigentlich nur wenige, weitere Einschränkungen zu beachten: Die Erstellung von Icon-Fonts geht nicht mit Bordmitteln wie z.B. Photoshop sondern muss über z.B. passende Web-Tools erledigt werden (mehr dazu im Anschluss).
Ein weiterer Nachteil betrifft den Workflow, da nach jeder Änderung einer Grafik der gesamte Icon-Font neu rausgespielt werden muss. Auch dieser Punkt kann nur begrenzt als Nachteil angesehen werden, weil der Workflow der Erstellung nicht sonderlich zeitraubend ist.
Webtools und Sammlungen
Icon Fonts können einfach und schnell mit Online-Tools wie z.B. Ico Moon erstellt werden. Dabei werden SVG-Grafiken hochgeladen die dann in einen Webfont (automatische Erstellung von allen Formaten wie eot, svg und woff) umgewandelt werden.
Neben diesen Generatoren gibt es auch eine immer größere werdende Anzahl an bereits fertigen Sammlungen wie z.B. Font Awesome. Nachteil hierbei ist natürlich keinen Einfluss auf die Grafiken selbst zu haben. Dadurch geht vor allem die Freiheit verloren, die Icons perfekt passend auf den Stil der eigenen Webseite auszulegen, weil das hinzufügen von eigenen Icons in solchen Font-Packs nicht möglich ist.
Ausblick
Icon-Fonts lösen sicherlich nicht alle Probleme und können nicht generell für alle Grafiken und Icons im Web eingesetzt werden. Der gemeinsame Einsatz von SVG (für komplexere Grafiken) und Icon-Fonts (für Icons und simple Grafiken) ist aber sehr interessant und in Zukunft durch die Weiterentwicklung von Displaytechnologie wohl immer mehr gefordert.
Natürlich stellt sich oft die Frage, ob der Mehraufwand durch den Einsatz von hochauflösenden Grafiken wirklich Sinn macht. Da sich die Displaytechnologie aber kontinuierlich weiterentwickelt und in wenigen Jahren High-Res Displays mit Sicherheit zum Alltag gehören ist diese Frage sicherlich mit „Ja“ zu beantworten.
Ein Praxisbeispiel wo wir einen Icon-Fonts aktuell eingesetzt haben ist der Foodblog von Jürgen: http://goldschwarz.at
