Sharpness quo vadis?

Icon-Fonts und das Sub-Pixel Problem

Mit der rasend schnellen Verbreitung der Retina Displays auf Smartphones und Tablets unterschiedlichster Marken offenbart sich mehr und mehr ein Problem im Bereich des Webdesigns. Und zwar ein Problem im Bereich der Schriftarten, welches sich mit bisherigen Auflösungen noch gar nicht als solches gestellt hat. Aufgrund der immer höher werdenden Auflösung wirken PNG-basierte Schrifttypen nicht mehr wirklich scharf und zeigen im Detail unschöne Pixelkanten und unscharfe Ränder. Eine Alternative muss her und im Wettlauf um die Durchsetzung eines neuen Standards zeichnen sich zwei Favoriten ab: Font-icons und das SVG-Verfahren (Scalable Vector Graphic). Schauen wir uns die beiden vermeintlichen Kontrahenten also einmal genauer an.

Die sogenannten Font-Icons sind super zu handhaben, haben allerdings für das Webdesign einen entscheidenden Nachteil: Sie sind nicht wirklich scharf, das heißt, sie bestehen den Pixelschärfe-Test nicht zu 100%. Bei genauem Hinschauen wird man auch hier immer einen unscharfen Rand erkennen können. Innerhalb der Design-Community ist es zwar mittlerweile schon fast üblich, mit Hilfe von font-face.com Fonts zu sammeln, weil man so einfach jederzeit auf sie zurückgreifen kann. Für das Hauptproblem der Font-Icons gibt es allerdings noch keine Lösung: Auf herkömmlichen Displays wirken sie eben immer noch ein wenig verschwommen um die Ränder - und noch sind diese Bildschirme die große Mehrheit derer, die tatsächlich verwendet werden. Das Problem lässt sich ganz einfach diagnostizieren, in dem man in ein Font-Icon hineinzoomt. Bei unterschiedlichen Schriftarten kommt es bei unterschiedlichen Größen vor, es tritt aber ausnahmslos immer auf.

Das Anti-Aliasing auf Subpixel-Ebene funktioniert bei Font-Icons super bei Kurven. Bei geraden Linien hingegen wird das Ergebnis aber einfach nicht scharf. Theoretisch könnte man hier Hints verwenden, um die Icons auf ganze Pixel hochzurechnen. Zur Zeit existiert aber kein Icon-Set, dass das mitmachen würde. Von daher wird dieser Ansatz noch viel zusätzlichen Arbeitsaufwand benötigen und die Dateigröße ebenfalls stark nach oben treiben. Darüber hinaus funktioniert das Arbeiten mit Hints nur auf bestimmten Plattformen, beispielsweise nicht auf OS X, iOS und Android, was ein weiterer Nachteil ist.

Ist SVG der Retter in der Not? Gleich vorweg: Nicht wirklich. Der große Vorteil von SV-Graphiken ist ihre unbestechliche Schärfe in der Originalgröße. Sobald man ihre Größe allerdings anpasst, haben sie das selbe Problem mit unscharfen Subpixeln wie Font-Icons.

In der Praxis fällt das Problem dennoch nicht besonders ins Gewicht, wenn man nur vielfache Vergrößerungen verwendet. Angenommen, man nimmt also eine Größe von 16 Pixeln als Ausgangsformat, dann lassen sich Vergrößerungen von 32 oder 48 Pixeln ohne große qualitative Abstriche problemlos erzielen. Problematisch wird es bei individuell gesetzten Rechtecken, bei denen die Pixel zum Einknicken neigen, wenn man ihre Form einem Rendering unterzieht. Das ist zwar nicht immer perfekt, lässt die gesamte Typo aber unter Umständen knackig aussehen.

SVG-Typos haben darüber hinaus noch andere Probleme: Die Anzahl der wirklich guten unter den verfügbaren SVG-Schriftsets ist nicht gerade hoch, es gibt keine Werkzeuge, um Sprites zu erstellen, die Farben lassen sich nicht innerhalb von CSS verändern (indem man innerhalb der SVG arbeitet, funktioniert es zwar doch, das erhöht allerdings den Arbeitsaufwand ungemein und ist nicht wirklich komfortabel), es gibt keine Effekte wie beispielsweise Schlagschatten (SVGs haben stattdessen Filter, die sich allerdings ebenfalls nicht leicht in CSS ändern lassen) und das größte Ärgernis ist die schlechte Kompatibilität mit den Browsern Firefox und Opera wenn eine SVG-Datei als Hintergrund verwendet wird. Es wirkt fast so, als würde die SVG zuerst in eine Bitmap konvertiert und anschließend an die Hintergrundgröße angepasst werden, wobei die Datei aber nicht neu gezeichnet, sondern lediglich vergrößert wird. Das macht die Angelegenheit extrem unscharf und ist nicht wirklich im Sinne einer Scalable Vector Graphic...

Auch wenn man die SVG als Element verwendet, wird es nicht einfacher, sie auch als Sprite einzusetzen. Eine Möglichkeit, dies zu lösen, wäre, das Element einzubetten und die Graphik der Ebene davor über sie drüber laufen zu lassen (also ohne die "Umfliessen"-Einstellung). Jedenfalls ist selbst das nur eine Notlösung und schafft nicht die Flexibilität, die man sich von einer Hintergrundgraphik wünschen würde.

Viele Icon-Fonts kommen serienmäßig mit einer PNG-Version, die man statt der SVG benutzen kann, allerdings braucht man in diesem Fall eine Lösung für die Darstellung auf hochauflösenden Retina Displays. Apple will für solche Fälle ein Webkit-Image-Set implementieren, das zwar vielversprechend aussieht, aber noch eine Weile in der Entwicklung dauern wird. Es gibt also kein wirkliches Wunderheilmittel, aber mit der Befolgung folgender Richtlinien kann man sich die Arbeit um ein Vielfaches einfacher machen:

Zu Beginn eines neuen Projektes empfiehlt es sich, grundsätzlich Font-Icons zu verwenden. Auch während den ersten Schritten der folgenden Entwicklung. In diesen Phasen ist es extrem nützlich, Zeichen schnell tauschen, ihre Farben ändern und verschiedene Effekte an ihnen ausprobieren zu können.

An einem bestimmten Punkt muss man sich aber entscheiden, welche Option für die vorliegende Arbeit das kleinere Übel darstellt: SVG- oder PNG-Icons. Die Entscheidung will wohl überlegt sein, steht und fällt aber letztendlich mit den individuellen Anforderungen des Projekts und persönlichen Vorlieben des Gestalters. Alle oben beschriebenen Beschränkungen wollen sorgsam abgewägt sein, mit dem verfügbaren Budget abgestimmt werden und es sollte Klarheit darüber bestehen, wie viele Zeichen tatsächlich benötigt werden und ob sie unterschiedliche Größen haben müssen.

Tatsache ist: Es gibt kein Zeichenformat, das für jeden denkbaren Zweck passend wäre. Warum sollte man also nicht versuchen, sie alle zu verwenden? Je nachdem, welches man gerade braucht? PNG setzt man am besten ein, wenn man viele verschiedene Größen mit vielen verschiedenen Farben benötigt, auf Logos oder ähnlichen Graphiken. SV-Graphiken eigenen sich super für Navigationsleisten, die immer in derselben Größe bleiben und so selbst auf Retina Displays scharf aussehen. Responsive inline-SV-Graphiken empfehlen sich für Menüleisten und ein Icon-Font für unterschiedliche Buttons.

Wie wird es in Zukunft weitergehen? Wird der unaufhaltsame Siegeszug der Retina Displays das Subpixel-Problem lösen und Updates alle SVG-Konflikte der Browser beheben, so dass wir die Freiheit von Icons feiern können, die von der letztendlichen Auflösung unabhängig sind? Selbst dann wird es immer noch nicht möglich sein, bestimmte Details skalenmäßig korrekt an die Größe der Icons anzupassen... Die Frage bleibt also offen: Sharpness, quo vadis?