#2: »Bildschirmwunder« Azuro, zum halben Preis

FontShop-Noventskalender, Türchen 2. Bis zum 6. Dezember 2012 täglich ein beson­deres Angebot: Neuheiten, Bewährtes, Schnäppchen, Angebote, Geschenke … Alle Türchen (=Angebote) bleiben bis Nikolausabend geöffnet, es sei denn, sie sind vergriffen.

Im Mai 2011 veröf­fent­lichte FontShop die hier im Fontblog einge­setzte Schriftfamilie Azuro. Sie wurde von Georg Seifert entworfen und von Jens Kutilek gemas­tert. Azuro ist die erste Schrift, deren Bildschirmverhalten bereits in der Entwurfsphase unter Windows, Mac-OS und Apple iOS mona­te­lang getestet wurde, einschließ­lich Rückwirkung auf den Designprozess. Und deshalb ist Azuro am Screen und auf Papier in hohem Maße leserlich.

Die OpenType-Familie (TrueType flavoured) bietet die Schnitte Regular, Italic, Bold und Bold Italic, enthält 589 Zeichen pro Font (inkl. grie­chisch und kyril­lisch) und wird für den Einsatz am Desktop-Rechner (TrueType, 199,– €) und im Web (.eot und .woff, 149,– €) gelie­fert. Im Noventskalender bietet FontShop beide Familien bis 06. Dezember 2012 zum halben Preis an. Um in den Genuss der 50 % Ermäßigung zu kommen, einfach die Azuro-Familie(n) auf font​shop​.com laden und beim Bezahlen den Promocode Azuro_50 verwenden …

Weitere ausführ­liche Informationen über die Entwicklung von Azuro und ihre tech­ni­sche Fertigstellung nach dem Klick …

Georg Seifert (schrift​ge​stal​tung​.de) ist eine schil­lernde Figur in der inter­na­tio­nalen Schriftdesign-Szene. Er studierte an der Bauhaus-Universität in Weimar, wo er 2002 mit der Arbeit an seiner ersten Schrift Graublau Sans begann, die sechs Jahre später erschien. Seit 2006 program­miert er unter dem Namen Glyphs eine eigene Typedesign-Software, die bereits auf mehreren Konferenzen für Aufsehen sorgte und aktuell in Japan ein Bestseller ist. Auch Azuro wurde mit Glyphs entwi­ckelt, aus einer Monospace namens Olivegreen, die sich Seifert einst für seine E-Mail-Korrespondenz und die Darstellung von Programmcode entwarf.

Das Design von Azuro

Azuro ist eine seri­fen­lose Schrift für das Lesen und Schreiben am Bildschirm. Was unter­scheidet sie von anderen hoch­wer­tigen Bildschirmschriften wie Arial, Verdana oder Lucida Grande? Azuro hat mehr Charakter – weniger aus ästhe­ti­schen Gründen als zur Steigerung der Leserlichkeit. Ihre Lettern basieren immer dann auf Antiqua-Formen oder weisen Schreibmerkmale auf (zum Beispiel das Doppeldecker-g, das kursive k, das ausla­dende Q, Versalhöhe < Oberlänge), wenn dies der Unterscheidbarkeit von Buchstaben dient (siehe Abb. oben). Wie bei anderen Screenfonts sind auch bei Azuro die Innenräume der Lettern maximal groß ange­legt und runde Buchstaben so offen wie möglich gezeichnet. All diese Merkmale und ihre Wirkung hat Georg Seifert bereits in der Entwurfsphase auf seinen Geräten getestet, einem Mac, einem PC und einem gehackten iPhone.

Die Azuro-Familie besteht aus den vier Grundschnitten Regular, Italic, Bold und Bold Italic, wahl­weise mit Mediäval- oder Tabellenziffern (8 Fonts). Der Unterschied zwischen Regular und Bold ist stärker ausge­prägt als bei vielen anderen Bildschirmschriften (und stärker als bei Druckschriften sowieso), damit sich fett gesetzte Wörter oder Textpassagen am Bildschirm ausrei­chend stark gegen­über dem Grundtext abheben, egal wie stark die Konturenglättung (-vergrauung) bei einem Rechner einge­stellt ist.

Die Zeichen-Ausstattung in allen Azuro-Schnitten ist üppig: 589 Glyphen, darunter die kyril­li­schen und die grie­chi­schen Schriftzeichen, sowie Pfeile, jede Menge Brüche, diverse Ziffernarten, mathe­ma­ti­sche Operatoren und mehr.

Azuro ist ein Sprachtalent, komplett ausge­stattet mit grie­chi­schen und kyril­li­schen Schriftzeichen – insge­samt 589 Glyphen pro Font

Die folgende Animation zeigt eine E-Mail, die in den Schriften Arial, Verdana und Azuro (siehe rotes Schlüsselwort in der Anrede) gesetzt wurde. Auch wenn sich unsere Augen in den letzten Jahren an die allge­gen­wär­tigen Bildschirmklassiker gewöhnt haben, so ist doch zu erkennen, dass Azuro ein leben­di­geres und ange­nehmer zu lesendes Schriftbild erzeugt. Wie bei jeder Veränderung zum Besseren wird dieser Effekt erst richtig deut­lich, wenn man sich an die höhere Qualität gewöhnt hat und irgend­wann die mindere Qualität wieder vor Augen erscheint. Im Gespräch mit Fontblog erin­nert sich der Designer Georg Seifert so an das Phänomen: »Die bessere Lesbarkeit der Azuro am Bildschirm zeigte sich immer dann, wenn ich an den Geräten von Freunden wieder auf die Standard-System-Fonts blickte. Dann wurde mir unmit­telbar bewusst, wie schnell meine Augen die gute Lesbarkeit der Azuro ange­nommen hatten.«

Animation: Der gleiche E-Mail-Text, gesetzt in den Schriften Arial, Verdana und Azuro

Das Mastering von Azuro

Häufig fragen FontShop-Kunden, was bedeutet eigent­lich Font-Technik oder was macht die Technikabteilung bei FontFont? Am Beispiel der Azuro, wo FontShop die Entwicklung hautnah miter­lebt hat, soll die Leistung der Technik mal etwas ausführ­li­cher beleuchtet werden.

Beginnen wir mit einer These: Die Rolle der Technik einer Schrift – im Vergleich zu ihrem Design –, ist ähnlich bedeu­tend wie die Bedeutung der Technik bei einem Automobil – im Vergleich zu dessen Design. Wenn auch nur ein Schräubchen falsch sitzt oder ein elek­tro­ni­sches Bauteil streikt, muss ein modernes Fahrzeug in die Werkstatt, weil das Fahren keinen Spaß macht oder sogar gefähr­lich wird. Bei einer Schrift ist dass ähnlich. Zwar hängt kein Menschenleben an der Funktionsfähigkeit einer Schrift, bisweilen aber große Werbe- oder Corporate-Design-Budgets. Ist ein Font erst mal unter­neh­mens­weit instal­liert und funk­tio­niert dann nicht einwand­frei, kann dies zu erheb­li­chen wirt­schaft­li­chen Schäden führen.

Azuro im Technikcheck: die Computerdiagnose bringt zu prüfende Zeichen ans Tageslicht (rot), bereits korri­gierte Glyphen (grün), zusam­men­ge­setzte Zeichen (hell­blau) und nicht zu bean­stan­dende Zeichen (weiß)

Die Karosserie der Azuro (die Rohversion) ging in die Hände von Jens Kutilek, nachdem Georg Seifert alle Zeichen entworfen und zuge­richtet sowie die Kerningklassen ange­legt und Kerningpaare defi­niert hatte. »Es ist immer gut, wenn sich jemand einen ›Rohfont‹ anschaut, der ihn nie zuvor gesehen hat. Manche Fehler fallen dem Schöpfer oft nicht mehr ins Auge, weil er sich sehr lange mit seiner Schrift beschäf­tigt hat.« defi­niert Jens Kutilek seine Rolle im Prozess der Font-Produktion. »Wenn jemand mit frischen Augen drauf schaut, werden Mängel plötz­lich offensichtlich«.

Zu Beginn führt Kutilek eine Art »Eingangstest« durch. Dabei prüft er, ob alle benö­tigten Zeichen vorhanden sind, richtig benannt und den rich­tigen Unicode-Werten zuge­ordnet sind. Anschließend wirft er einen Blick auf die Metriken, also die hori­zon­talen und verti­kalen Maße der Zeichen. Hier stellen sich Fragen wie: Sind die mathe­ma­ti­schen Zeichen dick­ten­gleich und stehen sie auf einer Achse? Sind die Akzentbuchstaben genauso breit wie ihre Basisbuchstaben? Sind Akzente even­tuell verrutscht oder fehlen sie bei manchen Zeichen?

Für den visu­ellen Vergleich der vier Schriftschnitte bedient sich Kutilek des Tools Autopsy von Yanone. Damit kann man jedes Zeichen aus allen Schriftschnitten neben­ein­ander stellen und Unregelmäßigkeiten sehr leicht fest­stellen. Mit Autopsy entdeckte er nicht nur einige falsch plat­zierte Akzente sondern auch Lücken bei den diakri­ti­schen Zeichen, die er besei­tigte, um die Sprachunterstützung nach dem WGL4-Standard (Windows Glyph List 4) zu gewähr­leisten. Auch die vom Designer ange­legten Kerningklassen hat er über­prüft und ergänzt.

Anschließend unterzog er die Outlines, also die Umrisskurven, die eine Buchstabenformen beschreiben, einer genaueren Kontrolle. Beim Entwerfen achtet kaum ein Designer zu 100 Prozent exakt auf die tech­ni­sche Korrektheit seiner Kurven, sondern vor mehr auf die Gesamtform eines Zeichens. So kann es passieren, dass in den Kurven kleine Ecken und Beulen oder Überlappungen stehen­bleiben, die nun beim Mastering sicher entfernt werden. Außerdem müssen die Kurven bestimmten tech­ni­schen Anforderungen entspre­chen, damit später die Bildschirmoptimierung einwand­frei abläuft. Zum Beispiel müssen an den Extremwerten der Kurven Stützpunkte einge­fügt werden, damit die Pixelposition dieser Extrempunkte später auf dem Bildschirm per Hinting beein­flusst werden kann.

Die Azuro-5 vor und nach der Bearbeitung: rechts mit korrekten Extrempunkten, die für die Bildschirmoptimierung von großer Bedeutung sind

Bis dahin liegen die Konturen der Buchstaben meist im PostScript-Format vor … ganz einfach deshalb, weil die viele Designer im Zeichnen von PostScript-(Bézier)-Kurven geübter sind als mit TrueType-Kurven, denen eine andere mathe­ma­ti­sche Beschreibung zugrunde liegt. Wenn man jedoch einen für den Bildschirm opti­mierten Font produ­zieren will, führt kein Weg an TrueType vorbei. Die Kurven werden daher im nächsten Schritt zu TrueType konver­tiert. Der neue Typ Font nennt sich dann »TrueType-flavored OpenType«, es ist also ein TrueType-Font, der mittels OpenType-Technik einen erwei­terten Zeichenvorrat und typo­gra­fi­sche Features enthalten kann.

Es folgt das Hinting, das einen großen Teil der Mastering-Zeit in Anspruch nimmt. Ohne Hinting sähe die Schrift unter Windows nicht gut aus. Das Macintosh OS X hingegen igno­riert diese »nach­träg­liche« Bildschirmoptimierung. Stattdessen hat Georg Seifert bereits während des Entwurfsprozesses darauf geachtet, dass die Schrift am Mac gut aussieht – wie oben bereits erwähnt: eine einzig­ar­tige Vorgehensweise bei der Gestaltung einer Schrift für das Lesen am Bildschirm.

Das Programm Autopsy, entwi­ckelt von Yanone, hilft beim schnellen Auffinden syste­ma­ti­scher Fehler, zum Beispiel falsch gesetzte Akzente (links)

Azuro ist auf eine Art gehintet, die unter Windows mit akti­viertem ClearType die beste Darstellungsqualität erzielt. Wenn man für die ClearType-gestützte Schriftglättung hintet, reichen weniger TrueType-Instruktionen aus, als wenn man für die reine Schwarzweiß-Darstellung opti­mieren würde. Die Font-Dateien werden daher kleiner. Beim Hinting für ClearType kommt es vor allem darauf an, die hori­zon­talen Stämme der Buchstaben zu defi­nieren, damit sie am Bildschirm nicht zu dünn werden und verschwinden, oder paral­lele Striche durch Rundungsfehler mal mit einem und mal mit zwei Pixeln darge­stellt werden. Außerdem werden die Ober- und Unterkanten der Buchstaben auf gleiche Positionen gebracht, um eine gleich­mä­ßige Grundlinie, x-Höhe und Oberlänge zu errei­chen, aus denen keine Buchstaben nach oben oder unten heraus­ragen. Das Hinting muß auch schrift­schnitt­über­grei­fend betrachtet werden, damit ähnliche Details nicht in den verschie­denen Fettegraden anders wirken, oder ein Stamm im aufrechten Schnitt noch zwei Pixel, aber im kursiven Schnitt schon drei Pixel breit ist.

Das Optimieren kann mit einem auto­ma­ti­schen Hinting beginnen, im weiteren Verlauf müssen jedoch alle Zeichen einzeln durch­ge­sehen werden, um über­flüs­sige Instruktionen zu entfernen und von der Automatik nicht gesetzte einzu­fügen. Das Hinting muss zwischen­durch immer wieder in verschie­denen Schriftgrößen geprüft und ange­passt werden. »Dazu mache ich es mir bequem und höre Musik. Wenn man sich ins Hinting vertieft, wird das fast ein medi­ta­tiver Vorgang …« beschreibt Jens Kutilek seine Gefühle in dieser Arbeitsphase.

Die verti­kalen Metriken, also die Maße für Oberlängen und Unterlängen und somit für die Zeilenhöhe, sind beson­ders knifflig einzu­stellen. Wenn man hier nicht aufpasst, weichen nachher die Zeilenabstände je nach Betriebssystem ab; der Zeilenabstand darf sich auch nicht ändern, wenn ein Benutzer vom Normal- auf den Bold-Schnitt wech­selt. Weil die einzelnen Browser die Zeilenhöhen unter­schied­lich inter­pre­tieren, sind die verti­kalen Metriken in den Azuro-Webfonts anders einge­stellt als in den Desktop-Fonts. Ansonsten wären in den verschie­denen Browsern die Grundlinien, auf denen die Buchstaben stehen, unter­schied­lich posi­tio­niert, was bei einem Browser-Wechsel sofort sichtbar ist.

Die Fonts müssen intern korrekt benannt sein, damit die Stilverlinkung auf allen Systemen funk­tio­niert. Bei einer Familie mit nur vier Schnitten ist das aber relativ einfach.

Die tech­ni­schen Eigenschaften der Fonts, wie zum Beispiel die OpenType-Features, müssen genau auf das jewei­lige Zielformat zuge­schnitten sein. Bei Webfonts ist die Minimierung der Dateigröße ein wich­tiges Ziel. Alles Unnütze muss also raus. Der Internet Explorer beherrscht zum Beispiel kein Kerning, also sind die Kerning-Informationen in den EOT-Webfonts gar nicht nötig. Die Azuro-WOFF-Fonts enthalten OpenType-Kerning, und der Desktop-Font zusätz­lich noch das »altmo­di­sche« paar­weise Kerning, was zwar die Font-Datei größer macht, dafür aber das Kerning in älteren Office-Versionen unter­stützt. Geringe Dateigrößen sind das A und O für einen schnellen Webseitenaufbau. Während ein Azuro-Office-Font rund 135 K »auf die Waage bringt«, liegt die Größe eines Webfonts bei nur 35 K. Dieser Unterschied verrin­gert den Traffic auf einer Website mit 2 Webfonts, die 1000 mal am Tag besucht würde, um 200 MB.

Azuro beim Verlassen des Masterings: fehler­freie Font-Daten

»Beim endgül­tigen Generieren der Fontdateien hat man das Problem, dass das verbrei­tete Programm FontLab Studio eigent­lich tech­nisch veraltet ist und keine OpenType-Fonts auf dem aktu­ellen Stand der Technik erzeugen kann.« resü­miert Jens Kutilek am Ende seiner Arbeit. Zum Glück gebe es ein Tool von Just van Rossum, das den unschein­baren Namen »ttx« trägt (http://​sourcef​orge​.net/​p​r​o​j​e​c​t​s​/​f​o​n​t​t​o​ols), mit dem er die gene­rierten Fonts in ein XML-Format konver­tiert, um anschlie­ßend manu­elle Änderungen direkt im Quellcode der Fonts vorzu­nehmen. »Das ist aber wirk­lich nichts für schwache Nerven, man muss da schon wissen, was man tut.«

Das Fazit von Jens Kutilek: »Die Azuro-Fonts stammen im wahrsten Sinne des Wortes aus Handaufzucht …«.