Colorfonts: Die Zukunft der Typografie ist bunt

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Colorfonts beleben die Welt der Typografie. Mehrfarbige Schriften schicken sich an, Grafik- und Webdesign zu erobern.

Was bedeutet der Begriff “Colorfonts”?

Beginnen wir mit dem Begriff. Colorfonts, also Farbschriften, heißen eigentlich korrekter “Chromatic Fonts”, also chromatische, farbige, bunte Fonts. Tatsächlich könnte ein chromatischer Font immerhin rein aus Graustufen oder einer anderen einzelnen Farbe bestehen. Wäre er dann noch nachvollziehbar als Colorfont beschrieben? Chromatic Fonts ist also sozusagen ein Oberbegriff. Für diesen Artikel bleibe ich dennoch bei Colorfonts. Das klingt einfach frischer.

Was ist daran neu?

Graue, rote, blaue, sonstige farbige Schriften können wir natürlich seit jeher benutzen, auch im Webdesign. Dazu bedarf es schlicht der entsprechenden Formatierung in unserem Lieblingspixeleditor oder der Auszeichnung mittels CSS. Der neue Ansatz der Colorfonts ist es, innerhalb ein und desselben Buchstabens mehrere Farben verwenden zu können. Also anstelle dieses Schriftzugs:

Diesen hier zu benutzen:

Lass uns an dieser Stelle nicht über Geschmack streiten. Es geht mir nur um das Prinzip. Der hier verwendete Font hört auf den Namen Bixa und steht unter dieser URL zum kostenlosen Download als OTF und WOFF zur Verfügung.

Wenn du die Bixa-Website besuchst, wirst du in den meisten Fällen allerdings nur einfarbige Darstellungen sehen, denn die Anzeige von Colorfonts ist, wie alles im Web, von der entsprechenden Browserunterstützung abhängig. Derzeit unterstützen nur Microsofts Edge und Mozillas Firefox die farbige Darstellung. Bei allen anderen greift der Fallback-Mechanismus, der Colorfonts mitgegeben ist, nämlich die Darstellung in Schwarzweiß. Das kleine Web-Tool ChromaCheck sagt dir, ob dein Browser Colorfonts unterstützt, sobald du es aufrufst.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Die Möglichkeiten, die sich durch Colorfonts für Designer ergeben, liegen auf der Hand. Typografie kann so auf ein ganz neues Level gehoben werden und noch größeren Einfluss als bisher schon auf das Webdesign nehmen. Gerade in Zeiten, in denen sich Designs immer stärker ähneln, kann eine weitere Differenzierungsmöglichkeit nur willkommen sein.

Was steckt technisch hinter den Colorfonts?

Offiziell heißt der neue Standard OpenType-SVG Font. Es handelt sich um eine Erweiterung des guten alten OpenType-Formats. Die farbigen Schriftteile werden in der OpenType-Datei als SVG-Elemente abgespeichert. Zusätzlich zu diesen farbigen Vektoren mit oder ohne Texturen und Verläufe können in dem neuen Format auch Bitmaps abgespeichert werden. So darf sich der OpenType-SVG Font wohl durchaus als eierlegende Wollmilchsau der Typografie bezeichnen lassen.

Wo steht die Technologie heute?

2016 erhob der W3C den OpenType-SVG Font in den Status eines Standards. Dennoch unterstützen Mitte 2017 nur zwei moderne Browser eben diesen Standard. Am Konsens kann es nicht liegen. Ursprünglich von Adobe und Mozilla entwickelt, gesellten sich bald auch Microsoft, Google, Apple und viele kleinere Player dazu, um sich auf ein gemeinsames Format für Colorfonts festzulegen.

Die Umsetzung erfolgt wohl vor allem deshalb nur zögerlich, weil gerade Google und Apple, aber auch Microsoft, bereits seit längerem über eigene, aber proprietäre Lösungen für die Implementation von Colorfonts verfügen. Es war vor allem der weltweite Aufschwung in der Nutzung von Emojis als Massenphänomen, der die Anbieter mobiler OS unter Zugzwang setze.

So kam Apple mit seinem Format SBIX, Google mit CBDT und Microsoft mit COLR auf den Markt. Es ist wohl unnötig zu erwähnen, dass die Formate nicht untereinander kompatibel sind. Der Umstieg auf das gemeinsame OpenType-SVG ist einigermaßen langwierig.

Designer auf Mac-Plattformen sehen womöglich nicht einmal die Notwendigkeit, denn das Apple-Format SBIX läuft auch unter Mac OS und wird von den gängigen Design-Apps, wie Photoshop und Sketch bereits unterstützt. An Browsern kann der Mac-Nutzer Firefox und Safari mit SBIX-Support wählen.

OpenType-SVG hingegen wird derzeit von Adobes Grafikprogrammen Photoshop ab Version CC 2017 und Illustrator ab dem Herbsupdate der CC 2017 unterstützt. Dafür allerdings auf beiden Plattformen. Weitere Wettbewerber dürften indes bald folgen. OpenType-SVG ist demnach nur eine Frage der Zeit. Wir befinden uns in einer Übergangsphase. Wenn du kannst, solltest du also ruhig bereits zum jetzigen Zeitpunkt mit der Technologie experimentieren.

Fonts zum Experimentieren

Vor einiger Zeit habe ich dir an dieser Stelle den Font “Gilbert” vorgestellt, der einer der ersten OpenType-SVG Fonts ist, der wirklich von den farblichen Möglichkeiten Gebrauch macht. Immerhin wurde er nach dem Erfinder der Regenbogenflagge benannt.

OneLine Bold von Roman Kaer

Eine weitere Möglichkeit stellt der weiter oben genannte Font “Bixa” dar. Du kannst übrigens vor dem Download die drei Farbelemente auf eigene Werte ändern, wenn dir das rötlich-blaue Erscheinungsbild nicht gefällt.

Kostenpflichtig bietet Roman Kaer seinen Font “OneLine Bold” drüben auf dem Creative Market an. Hier findest du auch den Font “Popsy” von Igor Petrovic.

Zu lösende Probleme

Neben dem Browsersupport gibt es eine Reihe kleinerer Probleme, die rund um OpenType-SVG noch einer Lösung bedürfen.

Die Dateigröße eines chromatischen Font ist naturgemäß größer als jene einer konventionellen Schrift. Hier muss die Balance gewahrt bleiben. Schwieriger wird das noch, wenn Bitmaps integriert sind. Da diese sich nicht verlustfrei skalieren lassen, müssten unterschiedliche Versionen für unterschiedliche Größen in der Font-datei hinterlegt werden. Das ist für die Desktop-Nutzung kein Problem, im Web aber umso mehr.

Generell sollten die Farbakzente etwa über CSS frei gesetzt werden können. Derzeit ist das nur global und nicht von Fall zu Fall möglich. Auch die Bearbeitungsmöglichkeiten in Photoshop sind durchaus verbesserungswürdig.

Dennoch dürfte es keinen Streit darüber geben, ob Colorfonts die Zukunft gehört. Sie sind schlicht der nächste logische Schritt in der Evolution digitaler Typografie.

Jetzt schnell zuschlagen: Noch vier Colorfonts kostenlos erhältlich!!

MIt dem aktuellen Update für die Creative Cloud unterstützt nun auch Illustrator die farbigen Schriften. Dies war offenbar der Grund für Adobe, die Colorfontweek auszurufen und bis Ende dieser Woche (KW 45/2017) ein paar Schriften kostenlos abzugeben.

Aktuell kannst du noch vier Schriften völlig problemlos bei Fontself runterladen. Ab morgen werden es nur noch drei sein und so weiter. Also lass dich von mir nicht aufhalten.

Bekommen kannst du aktuell noch die folgenden Schriften für lau:

(Der Artikel erschien erstmalig am 24. Juni 2017. Anlässlich der MAX 2017 und der nachfolgenden Colorfontweek wurde er am 7. November 2017 aktualisiert und erweitert.)

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

1 Kommentar auf "Colorfonts: Die Zukunft der Typografie ist bunt"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Wolfgang Zorn
Gast

Ich wurde Grafiker als noch Schriften in Schriftgestalungs Programmen erstellt wurden und die Einzigart von Schriften garantierte. Auch damals war schon Farbe und Verlaufstechnik normal und immer auch das Grundwissen von Typographie.
Mit der Programmvielvalt kammen auch immer mehr Möglichkeiten eine grafische Farbgeneration noch der anderen estehen zu lassen.

wpDiscuz