Manche Informationen und Funktionen lassen sich besser vermitteln, wenn sie in Form von Symbolen dargestellt sind. Dieser Tipp beschäftigt sich mit der Frage, wie sich Piktogramme zu diesem Zweck auf Webseiten und in Webanwendungen nutzen lassen.
1. Piktogramme
Ein Piktogramm ist ein einzelnes Symbol, das eine Information durch vereinfachte grafische Darstellung vermittelt [1]. Diese Definition lässt erkennen, dass die Verwendung von Piktogrammen den Einsatz von Grafik erfordert.
1.1. Rastergrafik
Eine Möglichkeit zur Verwendung von Piktogrammen ist es, Dateien in Webseiten einzubinden, in denen Symbole als Rastergrafik hinterlegt sind [2]. Ein Nachteil hierbei ist allerdings die mangelnde Skalierbarkeit von Rastergrafik. Zudem muss jedes so eingebundene Symbol zusätzlich zur Webseite einzeln geladen werden. Letzteres lässt sich durch das Einbinden von Grafiken mildern, die viele Symbole in einer Datei enthalten. Dies erfordert dann aber zusätzliche Logik zur Adressierung und Entnahme eines einzelnen Symbols.
1.2. Vektorgrafik
Vektorgrafik ist im Unterschied zu Rastergrafik beliebig skalierbar [3], hat aber zum Einbinden von Piktogrammen in Webseiten ansonsten dieselben Nachteile wie Rastergrafik.
1.3. Schriftarten für Piktogramme
Werden Piktogramme als Schriftart kodiert, lassen sich die Vorteile einer frei skalierbaren Vektorgrafik mit der einfachen Paketierung und Verwendbarkeit eines ganzen Zeichensatzes kombinieren. Outline-Fonts [4] sind hierfür das Mittel der Wahl und es gibt einige Hersteller, die diese Form der Verteilung von Piktogrammen wählen, allen voran Font Awesome [5] uvm.
Zur Verwendung eines bestimmten Outline-Fonts genügt ein einfacher Eintrag im Stylesheet, wie es beispielweise im Beitrag zur Nutzung von Schriftarten [4] beschrieben ist.
Wird eine Schriftart für Piktogramme so in einer Webseite eingebunden, hat jedes in der Schriftart enthaltene Symbol eine dokumentierte Klasse wie z.B. icon-folder-open-empty. Zur Darstellung des Piktogrammes wird an die gewünschte Stelle in der HTML-Seite ein i-Element notiert.
<html>
<head>
<title>Startseite</title>
</head>
<body>
<h1>Überschrift</h1>
<p>
<i class="icon-folder-open-empty"></i>
Weiterer Inhalt
</p>
</body>
</html>Die gewünschte Größe oder Farbe des Symbols ebenso wie jegliche andere Gestaltungsvorgaben werden über CSS-Einstellungen im Stylesheet formuliert, was mit Raster- oder Vektorgrafiken nicht gelänge. Dank der stufenlos skalierenden Eigenschaften von Outline-Fonts erscheinen die Symbole ohne Qualitätsverlust stets genau wie in den Gestaltungsvorgaben deklariert.
2. Individuelle Paketierung
Ein Nachteil von Schriftarten für Piktogramme ist deren Umfang. Ein einzelner solcher Zeichensatz enthält i.d.R. alle Symbole, die vom Hersteller erhältlich sind. Für eigene Zwecke werden in den seltensten Fällen alle Symbole im Zeichensatz benötigt. Für den Einsatz von jeweils nur wenigen Symbolen muss stets eine unnötig umfangreiche Schriftart geladen werden.
Abhilfe schafft ein Werkzeug wie Fontello [6]. Damit können aus einer Vielzahl von Angeboten unterschiedlicher Hersteller genau die benötigten Piktogramme individuell zu einem eigenen Satz zusammengestellt werden. Die so erzeugte Schriftart ist deutlich kleiner und passt exakt zur jeweiligen Webseite oder Webanwendung.
3. Fazit
Mit einem Werkzeug wie Fontello lassen sich alle Piktogramme, die für eine Webseite oder Webanwendung benötigt werden, indiviuell aus verschiedensten Quellen zusammenstellen und in einer genau passenden Schriftart erzeugen. Die Verwendung der so erzeugten Outline-Schriftart für Piktogramme erlaubt eine frei gestaltbare und skalierbare Darstellung individueller Symbole ohne Qualitätseinbußen.
4. Verweise
[1] Piktogramm auf Wikipedia
[2] Rastergrafik auf Wikipedia
[3] Vektorgrafik auf Wikipedia
[4] Beitrag zur Nutzung von Schriftarten im Web
[5] Website von Font Awesome
[6] Website von Fontello