search home list

Icon Fonts im Responsive Web Design

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:

Icon Stacks

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

Beispiel für Icon Fonts im Responsive Web Design für Wetter 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

Beispiel für Icon Fonts im Responsive Web Design
Quelle: Alistapart.com

Symbolset uses font magic to change words into icons.

Oak StudiosDesign Studio, Brooklyn, New York

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

Show all articles

What do you think?