Stehen Sie gerne 20 Minuten an der Feinkost für 10 dag Kantwurst an? In etwa so fühlt es sich an, wenn eine Website nicht innerhalb von zwei Sekunden vollständig geladen wurde. Bei Amazon führen weitere 100 Millisekunden Ladezeit bereits zu 1 % Verlust an Verkäufen. Wenn Sie es eilig haben, werden Sie es sich auch zwei Mal überlegen, ob Sie nicht doch auf die Wurst verzichten oder in einem anderen Supermarkt einkaufen.

Performance ist, vor allem bei Responsive Web Design, unerlässlich für positive User Experience. Daher sind Front End Developer stetig bemüht, die Performance von Websites zu verbessern. Dateigrößen von CSS Dateien, Java Scripts und Grafiken werden reduziert und jeder unnötige Ballast wird über Bord geworfen. Ein weiterer wichtiger Schritt in diese Richtung sind Icon Fonts.

Icon Fonts sind eine Sammlung von Vektor Grafiken gebündelt in einem Font, der ganz einfach, wie normale Schriftarten auch, mit @font-face in die Website eingebunden werden kann.

Auf die einzelnen Grafiken des Fonts kann mittels Buchstaben oder Unicode Zeichen zugegriffen werden.

Variante 1: mit Buchstaben

HTML Code

<span class="icon">a</span>

CSS Code

.icon
{
   font-family: 'Icon Font';
}

Variante 2: mit Unicode Zeichen

HTML Code

<span class="icon-user"></span>

CSS Code

.icon-user:before
{
   content:"UTF+f000";
}

Icon-Fonts haben die selben Cache- und Datei-Größen Vorteile wie Image Sprites, bringen aber noch weitere Vorteile mit:

• Schnelles Ändern von Größe, Farbe und Deckkraft, auch für diverse States wie :hover oder :focus
• Hinzufügen von Schattierungen oder Transparenzen
• Drehen und animieren mit einfachen CSS Anweisungen
• Auflösungsunabhängigkeit, daher skalierbar für High-Density Displays

Icon Stacks

Kombiniert man einzelne Icons aus einem Font und färbt sie ein, entstehen so ganz neue Icons.

Quelle: conor.cc

Accessibility

In punkto Accessibility hat es in der Vergangenheit Probleme gegeben, da für Screen Reader keinerlei Informationen mitgegeben wurden, außer einem Buchstaben oder Unicode-Zeichen. Um das zu umgehen, werden die Ligaturen von Schriften genutzt. Es ist möglich, eigene Ligaturen anzulegen. Tippt man eine bestimmte Zeichenfolge, wird diese durch die die eigens angelegte Ligatur ersetzt.

HTML Code

<ul>
  <li>Startseite</li>
  <li>Produkte</li>
  <li>Kontakt</li>
</ul>

Ergebnis

Quelle: Alistapart.com

Symbolset zum Beispiel enthält sieben Icon Font Sets, die nicht nur gut aussehen sondern auch gerade für gute Accessibility bekannt sind.

Do It Yourself

Nicht immer muss man auf bereits existierende Fonts zurückgreifen. Allerdings muss man hierfür die bekannten Programme wie Photoshop oder Illustrator beiseite lassen und zum Font Editor wechseln. Um den Umstieg zu erleichtern gibt es Tools wie Icomoon. Hier können SVG Dateien hochgeladen, mit Unicode Zeichen versehen und anschließend als Font exportiert werden.

Natürlich können auch Font-Dateien mehrere Kilobyte groß sein. Vor allem in Sets, die besonders viele Icons mitliefern. Hier lohnt es sich durchaus, eigene Fonts zu erstellen, um so einen weiteren Performance Vorteil zu erzielen. Indem man nur genau jene Icons in den Font integriert, die man braucht, können weitere wertvolle Kilobyte gespart werden. Wer das nicht selbst machen möchte, kann bei Fontello sich mit nur wenigen Klicks seinen eigenen Icon Font aus bereits vorhanden Fonts zusammenstellen und herunterladen.

Bekannte Icon Fonts

• Entypo
  Über 250 Icons in mehren Formaten (Font, EPS, PDF, PSD)
• Font Awesome
  Easy to use Icon Font für Twitter Bootstrap
• Foundation
  Icon Font aus dem bekannten Framework Zurb