Die Web-Vektoren kommen

Ein berechtigter Anspruch an gutes Webdesign: Es muss egal sein, mit welchem Gerät der User die Seite betrachtet. Ob mit dem Smartphone, dem Laptop oder einem Tablet, die Seite soll immer funktionieren und auch noch gut aussehen dabei – inklusive Icons und Firmenlogo.

Pixelgrafiken sind aus zwei Gründen problematisch. Erstens müssen sie für eine bestimmte Auflösung optimiert werden. Sollen verschiedene Displays unterstützt werden, müssen alle Symbole einmal für 72 ppi und dann noch einmal für 144 ppi erzeugt werden. Und wenn sich noch höher aufgelöste Displays durchsetzen, muss die gesamte Grafik erneut überarbeitet werden. Zweitens brauchen sie relativ viel Bandbreite, besonders für höhere Auflösungen. Eine doppelt so hohe Auflösung bedeutet viermal so viele Pixel und damit auch etwa viermal so viel Speicherplatz.

Abhilfe bieten Webservices, die Vektorgrafiken in komprimierte Webfonts verpacken. Damit hat man zwei Fliegen mit einer Klappe: Die Bildschirmauflösung spielt praktisch keine Rolle mehr und EOT- und WOFF-Schriften können so gut komprimiert werden, dass ein Font mit allen Icons weniger Speicherplatz auf die Waage bringt als eine einzige PNG-Datei. Ein WOFF mit dreißig Icons ist zwischen fünf und 10 Kilobyte groß, das EOT üblicherweise um die Hälfte größer.

Platzhirsch IcoMoon

Bestimmend ist zurzeit IcoMoon.io, verfügbar als Webservice und als Offline-App für Chrome. IcoMoon funktioniert unkompliziert und ohne Registrierung: Icons auswählen, Download, fertig. Geliefert wird eine Zip-Datei mit Fonts als EOT, WOFF, SVG und TTF. Alle modernen Browser unterstützen WOFF, ältere Versionen von Internet Explorer benötigen noch EOT.

Ebenfalls mitgeliefert werden HTML- und CSS-Samples, sogar mit JavaScript-Hacks, um die Icons in veralteten Browsern darstellen zu können. Dickes Plus: Die Icons werden mit Unicode-Werten im Private Use Area exportiert und das CSS verwendet sogenannte Pseudoselektoren. Damit sind die Fonts auch kompatibel mit Suchmaschinen, Screenreadern und E-Books. Extrapunkte gibt es für die Möglichkeit, alle Icons an einen beliebigen Abschnitt im PUA zu verlegen, um Code-Kollisionen mit anderen Fonts zu vermeiden.

Rudimentäres Bearbeiten

Es gibt sogar einen einfachen Editor, mit dem man einzelne Grafiken verschieben, spiegeln, rotieren und skalieren kann. Mehr aber nicht: In die Pfade selbst eingreifen ist online nicht möglich. Dafür bietet IcoMoon eine ausführliche Dokumentation, die auch für Font-Laien verständlich ist. Wirklich interessant wird es aber erst mit den zusätzlichen Optionen. So lassen sich eigene SVG-Grafiken importieren. Außerdem kann man für alle Symbole auf einmal die Grundlinie verschieben, um die Ausrichtung der Symbole zum Lauftext zu beeinflussen.

IcoMoon finanziert sich über eine Handvoll Extra-Services. Für 60 Dollar pro Jahr bekommt der Web-Developer Cloud-Synchronisation und begrenztes Hosting. Das reicht fürs Entwickeln. Will man die Fonts gleich für die fertige Webseite gehostet haben, legt man 120 Dollar pro Jahr ab.

Gegen Einmalzahlungen von 40 oder 60 Dollar gibt es auch spezielle Icon-Sets. Für die gibt es dann auch PNG-Dateien in verschiedenen Auflösungen, die der User festlegen kann. Im 60-Dollar-Paket bekommt man die Icons auch gleich fix und fertig als Photoshop-Vektorformen und etwa fünfzig zweifärbige Icons. Dahinter verbergen sich Symbole, die mit zwei verschiedenfarbigen Glyphen dargestellt werden.

Open-Source Fontello

Der Webservice Fontello.com geht auf eine Idee des russischen Programmierers Vitaly Puzrin zurück. „Icons in Fonts einzubauen erschien mir als die optimale Lösung“, meint er zum Ursprung des Projekts. Es kam ihm aber seltsam vor, dass es nur so wenige Icon-Webfonts gab: „Warum macht das nicht jeder?“ Puzrin gab sich selbst die Antwort: Die Herstellung war zu mühsam und fehlerbehaftet für den Durchschnittsdesigner. Das Projekt „Fontomas“ wurde daraufhin sein Versuch einer Problemlösung. Weil der Name aber schon belegt war, wurde es bald auf „Fontello“ umgetauft.

Die Vorgangsweise ist im Wesentlichen dieselbe: Vorgefertigte Symbole auswählen oder eigene hochladen und Download-Button klicken, fertig. Man bekommt ein Zip-File mit dem Font in den vier erwähnten Formaten, sowie CSS- und HTML-Dateien. Auch Fontello versieht die Icons mit Unicode-Werten aus dem Private Use Area, das CSS-Sample arbeitet korrekt mit Pseudoselektoren. Angesiedelt werden die Icons ab Code-Stelle E800. Will man sie woanders haben, muss man sie aber einzeln umkodieren. 

Schrift-Vorschau

Fontello-Plus: Der Service zeigt eine kombinierte Vorschau von Icons im Zusammenspiel mit gewöhnlicher Schrift. So lässt sich überprüfen, wie sich die Icons zur Schrift ausrichten. Ob das viel bringt, ist aber fraglich. Denn im Gegensatz zu IcoMoon gibt es keine Möglichkeit, die Icons zu bearbeiten. Das muss man also außerhalb von Fontello machen. Dafür lassen sich Grafiken nicht nur wie bei IcoMoon als SVG, sondern auch in einem Aufwischen in einen SVG-Font importieren.

Ein wichtiger Punkt: Fontello ist ein Open-Source-Projekt. Alle Quelldaten stehen vollständig auf dem Code-Server GitHub zur Verfügung. Nicht nur das: Über GitHub lässt sich sogar ein einfaches Webfont-Hosting organisieren. Für kleine Projekte mit Budget-Beschränkung dürfte das vollauf reichen.

Fontastic

Als einziger Service verlangt Fontastic.me auch für die kostenlosen Funktionen eine Registrierung mit einer E-Mail-Adresse. Fontastic ist ein Projekt des Designers Vincent Le Moign. Er erlangte Szene-Bekanntheit für seine Plattform „Agile Designers“. Wie bei den anderen Services gibt es auch hier eine große Auswahl vorgefertigter Icons. Wie bei IcoMoon kann man einzelne SVG-Daten importieren.

Von Haus aus legt Fontastic die Icons an Code-Stellen, die eigentlich für Buchstaben vorgesehen sind. Technisch gesehen ist das keine gute Idee, weil zum Beispiel eine Suchmaschine die Icons dann nicht von Wörtern unterscheiden kann. Glücklicherweise lassen sich alle Glyphen mit der Funktion „Reset Characters“ ins Private Use Area verschieben. Will man aber die Codes irgendwo anders als am Beginn des privaten Unicode-Abschnitts haben, muss man jedes Symbol einzeln umkodieren.

Mini-Hosting inklusive

Fontastic bietet kostenloses Hosting über Amazon-Server für bis zu 5000 monatliche Pageviews. Für fünfDollar im Monat bekommt man mehr Power und ein Hosting für 500.000 Views im Monat. Es gibt noch eine andere Möglichkeit, sein Geld bei Fontastic loszuwerden: Das „Minicons Ultimate Pack“ mit über 1500 Symbolen lässt sich gegen einmalige 47 Dollar nutzen. Für 82 Dollar bekommt man die Illustrator-Quelldateien mitgeliefert.

Alles in allem kommt der Funktionsumfang bei allen drei Services annähernd aufs Gleiche raus. Es sind die kleinen Extras, auf die man schauen muss: Fontello bietet den besten Import, weil es auch einen ganzen Font auf einmal hereinholen kann, IcoMoon bietet einfache Nachbearbeitung, und Fontastic eben begrenztes Hosting.

Rainer Scheichelbauer