Corinna | Webdesignerin bei transresult  

Schriftendienst Google Fonts erweitert das kostenlose Angebot um Material Design Icons

Schon seit einigen Jahren ist Google Fonts für unsere Designer die meistgenutzte Open Source Sammlung für hochwertige, lizenzfreie Schriftarten. Sie eignen sich für alle Anwendungsfälle, können als Webfonts eingebunden oder als TrueType Fonts installiert und lokal genutzt werden. Ein großer Vorteil für medienübergreifende Corporate Designs, deren zentraler Bestandteil eine einheitliche Schriftart ist. Die komfortablen Filterfunktionen innerhalb der Google Fonts Plattform weisen aber auch schnell passende Alternativen für diejenigen Hausschriften von Kunden auf, die nicht im Webformat vorliegen. 

Dieses tolle Angebot wird nun von Google um die wichtige Ressource Icon Fonts ergänzt. Hierunter findet sich zum Start das “Material Design Icon” Set - also 900+ Icons in der von Google speziell für digitale Interfaces entwickelten Designsprache. Weitere Open Source Icon Libraries sollen demnächst folgen. 

Wie funktionieren Icons?

Icons dienen als Teil eines Interfaces dazu, Kommunikation schnell und intuitiv zu ermöglichen -  unabhängig von Sprache und Kultur. Ihre reduzierte und prägnante Stilistik fördert die Erkennbarkeit. Dabei muss die Bedeutung von Icons zumeist erst erlernt werden. Für die Orientierung des Users ist daher entscheidend, dass bestimmte wiederkehrende Konzepte, wie z.B. Handlungsanweisungen, mit einer etablierten Ikonik verknüpft sind. Das gilt insbesondere in digitalen Umgebungen wie Websites und Apps: Das X-Icon z.B. ist universell bekannt für das Schließen eines Fensters auf dem Screen zu stehen, während das Lupen-Icon zumeist nicht etwa für “vergrößern” steht, sondern für “suchen”.

Was sind die Vorteile von Icon Web Fonts? 

Die Integration von Icons in Form von Icon-Fonts ist besonders einfach. Im Vergleich zur Einbindung von Icon-Bildern bieten sie folgende Vorteile:

• Skalierbarkeit:
  Die Icons können stufenlos skaliert werden - verpixeln also nicht und sind gerade auch für sehr kleine Größen optimal gestaltet.
• Kostengünstig:
  Es muss nicht jedes Icon selbst erstellt und gespeichert werden - spart Zeit und Geld
• Flexibilität:
  Farbe, Größe und weitere Parameter lassen sich flexibel anpassen.
• konsistentes Design:
  einheitliche Optik des gesamten Icon-Sets
• Retinadisplay-optimiert
  scharf auch auf Screens mit hoher Pixeldichte

Material Icons verwenden - so funktioniert´s

Die Einbindung in Websites erfolgt im Prinzip genauso einfach wie bei den Webfonts.
Benötigt wird ein Link im Header der Website:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

oder eine Importregel im CSS als Referenz auf den Google Font Server

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

- wahlweise kann das gesamte Icon Set auch heruntergeladen und lokal gehostet werden. Das Icon selbst kann dann im HTML über ein <span>-Element  mit gesetzt werden: 

<span class="material-icons">face</span>

Und so sieht es im Browser aus:

favorite_border favorite_border favorite

Die Klasse definiert die Material-Icons Schriftart, und kann durch weitere Angaben wie “md-18 md-light” erweitert werden, um Größe, Farbe, Aktivität oder auch Stileigenschaften wie den Eckradius der Figur anzupassen. Eine ausführliche Anleitung gibt es im Material Icons Guide.

Mein Fazit zu Icon Webfonts

Icon Webfonts sind ideal, um Icons visuell stimmig und einfach auf der eigenen Website einzusetzen. Mit den Material Design Icons von Google Fonts steht eine besonders hochwertige, auf digitale Interfaces spezialisierte Icon Bibliothek zur Verfügung, die in Sachen Flexibilität, Umfang und Ästhetik keine Wünsche offen lässt. Dank der Open Source Lizenz sind sie frei für die persönliche und kommerzielle Nutzung und können zusätzlich als Bilder heruntergeladen werden.

Sie möchten auch Icon Fonts wie die Material Design Icons auf Ihrer Website nutzen und haben hierzu Fragen?

Gerne helfen wir Ihnen bei der Einrichtung.

zum Kontaktformular