Ich persönlich bin ein großer Fan von schönen Icons und finde hier und da immer wieder ein paar tolle Icon Sets, die ich in meinem nächsten Projekt verwenden will. Angefangen bei Klassikern wie famfamfam über moderne Ableger wie z.B. die glyphicons, die u.a. von Bootstrap verwendet werden.

Doch im Zeitalter von hochauflösenden Bildschirmen haben diese (meist) 16×16 Pixel Bilder beinahe „ausgedient“ … Viel zu verwaschen und unschön anzusehen.

Wo liegt das Problem?

Das „Problem“ liegt an Bildschirmen mit hoher Pixeldichte, wie wir sie von Smartphones und Tablets kennen. Inzwischen gibt es Bildschirme jenseits der 300ppi (Pixel Per Inch) Marke, was zwar einerseits zu gestochen scharfer Schrift führt – Doch andererseits zu schwammigen Bildern, insbesondere fällt das bei den kleinen Icon-Grafiken auf. Es gibt zwar diverse Workarounds, doch darauf komme ich ein anderes mal zu sprechen…

Was lässt sich tun?

Einige Frontend-Frameworks reagieren auf diese Unschönheit und binden Icon-Fonts anstatt Icon-Sprites ein, so auch Kickstrap: Hier wird Font-Awesome verwendet.
Auch Bootstrap reagiert – In der kommenden Version 3 soll auf die Glyphicon Icon-Font umgestiegen werden!

Wo genau liegt der Vorteil?

Der Vorteil von den Icon-Fonts ist ganz klar die Skalierbarkeit! Schriftarten basieren auf Vektorgrafiken anstatt Pixeln – Dadurch können sie ohne Qualitätsverlust vergrößert werden.

Wo ist der Haken?

Da fallen mir auf Anhieb leider drei ein:

1. Icon-Fonts sind einfarbig
   Eine Schriftart verfügt immer nur über eine Farbe, sie kann nicht mehrfarbig sein. Das bedeutet wir müssen uns von den farbenfrohen Grafiken verabschieden…
2. Schriftarten benötigen mehr Speicher
   Grade um in allen Browsern und auf allen Betriebssystemen die Icons darzustellen werden mehrere Dateien benötigt in verschiedenen Formaten: EOT, SVG, TTF und WOFF. Diese werden üblicherweise mit Hilfe der CSS @font-face eingebunden.
3. Icon-Fonts lassen sich nicht so einfach bearbeiten
   Im Gegensatz zu einfachen Grafiken lassen sich Schriftarten nicht so einfach bearbeiten oder selbst erstellen. Wir können nicht einfach hergehen und alle Icons aus einer Icon-Font rauswerfen die wir nicht benötigen (z.B. um Speicherplatz zu sparen)

Muss ich unbedingt Icon-Fonts nutzen?

Nein, natürlich muss niemand Icon-Fonts benutzen. Icon-Fonts werden in Zukunft allerdings eine immer wichtigere Rolle spielen – Spätestens wenn auch Desktop-Rechner die hochauflösenden Bildschirme verwenden. Bisher profitieren nur Mobile Geräte und einige Apple Produkte (Stichwort „Retina“) von den hochauflösenden Fonts.

Was gibt es für Icon-Fonts?

Glyphicons und Fontawesome haben wir ja weiter oben bereits kennengelernt, doch natürlich gibt es noch viele mehr!

• IcoMoon
• Entypo
• Iconic
• Typicons
• Modern Pictograms
• Meteocons
• MFG Labs
• Maki
• Zocial
• Elusive
• Linecons

Ein großartiges Tool um sich eine ganz eigene Icon-Font zusammen zu stellen ist Fontello! Absolut großartiger Icon-Font-Generator.

Eigene Font erstellen

Natürlich gibt es, für die talentierten Grafiker unter euch, die Möglichkeit eine eigene (Icon-) Font zu erstellen… Aber Achtung: Das ist alles andere als einfach!

Ein gutes Tutorial (in Verbindung mit Inkscape) findet ihr auf webdesignerdepot. Das Tutorial ist in Englisch verfasst und sehr empfehlenswert!

Mit diesen Worten möchte ich mich für diese Woche von euch verabschieden und hoffe ihr habt eine erfolgreiche Woche!