Für das Lesen am Bildschirm: die neue Azuro

FontShop veröf­fent­licht heute seine zweite exklu­sive Schriftfamilie, nach Axel von Erik Spiekermann – erschienen vor zwei Jahren, siehe Fontblog-Beitrag Axel, die neue Spiekermann. Die Neuerscheinung heißt Azuro, wurde von Georg Seifert entworfen und von Jens Kutilek gemas­tert. Azuro ist wahr­schein­lich die erste Schriftfamilie, deren Bildschirmverhalten bereits in der Entwurfsphase unter Windows, Mac-OS und Apple iOS uner­müd­lich getestet wurde, einschließ­lich Rückwirkung auf den Designprozess. 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 kommt für den Einsatz am Desktop-Rechner (TrueType, 199 €) und im Web (.eot und .woff, 149 €) auf den Markt. Zur Einführung bietet FontShop beide Familien bis 31. Mai 2011 zum unwi­der­steh­li­chen Lizenzpreis von je 19,90 € an, nur auf www​.font​shop​.com.

Erst den ausführ­li­chen Beitrag lesen oder sofort zu Azuro Office oder Azuro Web auf font­shop. com …

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. Mit diesem Programm entstand auch Azuro, an der Seifert die letzten beiden Jahre arbei­tete. Er entwi­ckelte die Familie aus einer Monospace namens Olivegreen, die er sich einst für seine E-Mail-Korrespondenz und die Darstellung von Programmcode entwarf.

Jens Kutilek studierte Kommunikationsdesign in Braunschweig, grün­dete nach dem Studium mit zwei Freunden das Webdesign-Büro Netzallee und arbeitet seit 2007 in der Font-Technik-Abteilung bei FSI FontShop International. Das am häufigsten besuchte Highlight der Netzallee-Website ist Comic Jens, eine kosten­lose Alternative zur weit verbrei­teten Comic Sans. Kutileks Leistung beim Mastering der neuen Azuro-Schriftfamilie wird im zweiten Teil dieses Beitrags näher beschrieben.

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 zum Zwecke der Steigerung der Lesbarkeit. 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 kleiner 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. 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 (mehr dazu morgen in einem Interview mit dem Entwerfer).

Die Azuro-Familie besteht aus den vier Grundschnitten Regular, Italic, Bold und Bold Italic. Der Unterschied zwischen Regular und Bold ist stärker ausge­prägt als bei manch 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, ganz egal wie stark dir Konturenglättung (-vergrauung) bei einem Rechner einge­stellt ist.

Die Zeichen-Ausstattung in allen Azur-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 nach­fol­gende Animation zeigt eine E-Mail, die nach­ein­ander 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 anderes 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 …«.