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 Kennung wie z.B. . Diese Kennung wird dort in die Seite geschrieben, wo das Symbol erscheinen soll. An der Stelle der Kennung erscheint dann das Symbol.

Eine HTML-Seite mit einem Piktogramm
<html>
  <head>
    <title>Startseite</title>
  </head>
  <body>
    <h1>Überschrift</h1>
    <p>
      <i class="demo-icon icon-folder-open-empty">&#xf115;</i>
      Weiterer Inhalt
    </p>
  </body>
</html>

Zur weiteren Gestaltung wird das Symbol im obigen Beispiel von einem HTML-Element <i> umschlossen. Dessen Klasse icon-folder-open-emtpy ist ein zusätzlicher Indikator, der kennzeichnet, welches Symbol ausgegeben werden soll. Über die Klasse demo-icon werden dem Symbol Gestaltungsangaben wie folgt mitgegeben.

Gestaltung eines Symbols über CSS
demo-icon {
  font-family: "pikto";
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* weitere Gestaltungsvorgaben */
}

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