COLRv1 und CSS font-palette: Web-Typografie wird farbenfroh

Laut Toshi Omagari, dem Autor von Arcade Game Typography, wurde die erste mehrfarbige digitale Schriftart der Welt 1982 für ein nie veröffentlichtes Videospiel namens Insector erstellt. Mehrfarbige Schriftarten, manchmal auch chromatische Typen genannt, sind im Web immer noch relativ selten, obwohl das COLR-Schriftformat seit 2018 volle Cross-Browser-Unterstützung hat (sogar im Internet Explorer!).

Die Technologie eröffnet eine völlig neue Ader typografischer Kreativität. Während einige der Farbschriften, die ich gesehen habe, bestenfalls grell waren, sind chromatische Schriftarten unterhaltsam, innovativ und aufmerksamkeitsstark. Mit der Hinzufügung neuer CSS-Features – einschließlich der font-palette-Eigenschaft und der @font-palette-values-Regel – zur Steuerung der Farbpalette von Farbschriften und der Weiterentwicklung des COLR-Schriftformats ist es eine großartige Zeit, um einzutauchen und mit dem zu experimentieren, was moderne Web-Typografie leisten kann.

COLR-Unterstützung

Ich habe zuletzt 2018 über Farbschriften geschrieben. Damals gab es vier verschiedene Standards für mehrfarbige Schriftarten: OpenType-SVG, COLR, SBIX und CBDT/CBLC. Sie können ChromaCheck verwenden, um zu sehen, welche Farbschriftformate Ihr Browser unterstützt.

Google Chrome hat OpenType-SVG als „wontfix“ markiert, was bedeutet, dass dieses Format niemals von Chrome oder Edge unterstützt wird. SBIX und CBDT/CBLC können für die Verwendung im Web größtenteils ignoriert werden, da sie beide auf Rasterbildern basieren und bei größeren Schriftgrößen verschwommen werden. Die große Dateigröße von Bitmap-basierten Schriftarten macht sie auch zu einer schlechten Wahl für das Web.

Ulrike Rausch ist die Schöpferin von LiebeHeide, einer Bitmap-Farbschrift, die unheimlich das Aussehen eines Kugelschreibers nachbildet. „Mein größtes Ziel war es immer, handschriftlichen Text so authentisch wie möglich zu reproduzieren“, erzählte sie mir. „Für LiebeHeide konnte ich diese handgemachten Attribute endlich mit einer Schriftart simulieren. Der Nachteil? Alle PNG-Bilder in der Schriftdatei summieren sich und ergeben eine riesige OTF-Dateigröße. Das mag für Desktop-Anwendungen wie Adobe InDesign kein Problem sein, aber für die Verwendung im Web ist die Schriftart kaum anwendbar.“

Alle Browser unterstützen COLR-Schriftarten (jetzt allgemein als COLRv0 bezeichnet). Version 98 von Chrome (und Edge), die im Februar veröffentlicht wurde, fügte die Unterstützung für COLRv1 hinzu, eine Weiterentwicklung des Formats.

COLRv0 und COLRv1

COLRv1 ist Teil des OpenType 1.9-Standards. Während dem ursprünglichen COLRv0 viele kreative Möglichkeiten von OpenType-SVG fehlten, erfüllt COLRv1 diese Möglichkeiten und vermeidet bestimmte Nachteile. COLRv0 konnte zum Beispiel nur Vollfarben darstellen, während COLRv1 lineare, radiale, und konische Farbverläufe darstellen kann. Das Format fügt auch Compositing und Blending hinzu und ermöglicht die Wiederverwendung von Formen, um die Dateigröße zu reduzieren.

Typografieexperte Roel Nieskins erklärt: „Ich habe früher gesagt, dass das OpenType-SVG-Format das beste Format ist, da es die größte Vielseitigkeit bot – bis mir klar wurde, dass dies für eine Low-Level-Aufgabe wie die Textdarstellung einfach zu komplex ist. Es implementiert eine grundlegende Teilmenge von SVG auf der Ebene der Schriftartdarstellung. Aber es funktioniert nicht gut mit anderen Schrifttechnologien (Hinting, variable Achsen usw.) und ist schwer zu implementieren. Also wechselte ich zu COLR. COLR verwendet im Grunde alles wieder, was OpenType-Schriftarten bereits haben. Es fügt „nur“ Ebenen hinzu und die Möglichkeit, die Farbe jeder Ebene zu ändern. Einfach, aber effektiv.“

COLRv1 ist vollständig kompatibel mit variablen Schriftachsen, und es gibt bereits Beispiele für variable COLR-Schriftarten wie Merit Badge, Plakato Color und Rocher Color.

Hier ist ein eindrucksvolles Beispiel von Ulrike Rausch, was mit dem Format möglich ist: eine (derzeit unveröffentlichte) Schriftart, die das Aussehen einer Neonschildes digital nachbildet

Akiem Helmling von der Schriftgießerei Underware ist begeistert von COLRv1 und sagte mir: „Das COLRv1-Format kann die Typografiegestaltung potenziell ähnlich (oder sogar stärker) beeinflussen wie variable Schriftarten in den letzten Jahren.“ Für Akiem ist es zweifellos das überlegene Format. „Alle bisherigen Farbformate waren schlechte Hacks, um Glyphen Farben hinzuzufügen. Obwohl OpenType-SVG von einigen Leuten als gute Lösung angesehen wird, ist es aus meiner Sicht überhaupt keine. Aus pragmatischer Sicht ist SVG ein „geschlossener Raum“ innerhalb der offenen Struktur von OpenType. Es gibt keine Möglichkeit, Daten wiederzuverwenden oder zu verknüpfen oder eine Verbindung zwischen anderen Schriftarttabellen und der SVG-Tabelle herzustellen. Und deshalb können wir keine variable Schriftart mit variablen SVG-Daten erstellen.“

Es ist noch zu früh für das Format. Mozilla hat COLRv1 noch nicht veröffentlicht, aber eine positive Haltung zum Format eingenommen und erklärt, dass es „das Potenzial hat, OpenType-SVG-Schriften im Webgebrauch zu ersetzen“. Apple zögert, es in Safari zu implementieren.

COLRv1-Schriftarten werden in diesen Browsern weiterhin angezeigt und sind lesbar, aber alle Buchstaben werden eine einzige Vollfarbe haben (die Sie mit der CSS-color-Eigenschaft festlegen können, genau wie bei einer normalen Schriftart). Wir müssen noch sehen, wie viele Schriftgießereien COLRv1-Schriftarten veröffentlichen, und einige beliebte Design-Tools wie Figma unterstützen nicht einmal COLRv0, aber ich bin hoffnungsvoll und glaube, dass dies die Zukunft der Farbsatztypografie im Web sein wird. In der kurzen Zeit, in der COLRv1 existiert, gab es bereits einige schöne Beispiele dafür, was die Technologie leisten kann, wie z. B. Reem Kufi und Bradley Initials.

COLR und CSS

Wenn Sie eine Farbschrift verwenden, möchten Sie wahrscheinlich deren Farben steuern können. Bisher war dies mit CSS nicht möglich. Die font-palette-Eigenschaft bringt die Möglichkeit, das Standardfarbschema einer Schriftart zu überschreiben und Ihr eigenes anzuwenden. Diese Eigenschaft funktioniert auf COLRv0- und COLRv1-Schriftarten. (Apples Myles Maxfield erklärt, dass SVG-Schriften sich für die Verwendung von Paletten *opt-in* können, während alle Farben einer COLR-Schriftart *automatisch* von CSS überschrieben werden.)

Die Entwicklung einer anständigen Farbpalette ist eine feine Kunst. Einige Typografen haben die harte Arbeit für uns geleistet und alternative Paletten in die Schriftart integriert. Sie können diese verschiedenen Farbschemata mit base-palette in CSS auswählen.

Wie erfahren Sie, ob eine Schriftart eine alternative Palette bietet? Die Website der Schriftart könnte es Ihnen sagen. Wenn nicht, gibt es ein praktisches Werkzeug namens Wakamai Fondue, das alle verfügbaren Farbschemata auflistet (siehe Bild unten). In diesem Beispiel verwende ich Rocher Color, eine kostenlose variable Farbschrift von Henrique Beier mit Flintstones-Vibes. Wenn wir uns Wakamai Fondue ansehen, können wir sehen, dass diese Schriftart vier Farben verwendet und elf verschiedene Palettenoptionen bietet.

Die Verwendung von base-palette: 0 wählt die Standardfarbpalette aus (im Fall von Rocher sind das Orangetöne und ein Braun).

Die Verwendung von base-palette: 1 wählt die erste alternative Palette aus, die vom Ersteller der Schriftart definiert wurde, und so weiter. Im folgenden Codebeispiel wähle ich eine Farbpalette aus verschiedenen Grautönen aus

 @font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}

Sobald Sie eine Palette mit der CSS-Regel @font-palette-values ausgewählt haben, können Sie sie mit der font-palette-Eigenschaft anwenden

.grays {
  font-family: 'Rocher';
  font-palette: --Grays;
}

Natürlich möchten Sie vielleicht *Ihre eigene* Palette erstellen, um Ihre Markenfarben anzupassen oder Ihre eigenen Designempfindungen zu erfüllen. Wenn Sie alle Farben überschreiben möchten, müssen Sie base-palette nicht angeben.

Nehmen wir als Beispiel Bungee von der wegweisenden Typografin David Jonathan Ross. Sie verwendet standardmäßig nur zwei Farben: Rot und Weiß. Im folgenden Beispiel überschreibe ich beide Farben der Schriftart, sodass die base-palette keine Rolle spielt und weggelassen wird

 @font-palette-values --PinkAndGray {
  font-family: bungee;
  override-colors:
    0 #c1cbed,
    1 #ff3a92;
}

@font-palette-values --GrayAndPink {
  font-family: bungee;
  override-colors:
    0 #ff3a92,
    1 #c1cbed;
}

Alternativ können Sie base-palette als Ausgangspunkt festlegen und nur einige Farben selektiv ändern. Unten verwende ich die graue Farbpalette von Rocher, überschreibe aber eine Farbe mit einem mintgrünen Ton

@font-palette-values --GraysRemix {
  font-family: Rocher;
  base-palette: 9;
  override-colors: 
    2 rgb(90,290,210);
}

body {
  font-family: "Rocher";
  font-palette: --GraysRemix;
}

Bei der Angabe von override-colors ist es schwierig zu wissen, welcher Teil der Schriftart mit welcher Nummer überschrieben wird – Sie müssen herumspielen und experimentieren und den gewünschten Effekt durch Versuch und Irrtum erzielen.

Wenn Sie möchten, können Sie sogar die Farbe von Emoji-Schriftarten ändern, wie z. B. Twemoji (unten gezeigt) oder Noto. Hier ist eine lustige Demo von einem Font-Ingenieur bei Google.

Aktuelle Einschränkungen

Eine bedauerliche Einschränkung ist, zumindest vorerst, dass CSS-Custom-Properties in @font-palette-values nicht funktionieren. Das bedeutet, dass das Folgende ungültig ist

@font-palette-values --PinkAndBlue {
  font-family: bungee;
  override-colors:
    0 var(--pink),
    1 var(--blue);
}

Eine weitere Einschränkung: Animationen und Übergänge von einer font-palette zur anderen interpolieren nicht – das bedeutet, Sie können sofort von einer Palette zur anderen wechseln, aber nicht allmählich zwischen ihnen animieren. Mein Traum von einer grell animierten Emoji-Schriftart ist leider nicht realisiert.

Browser-Unterstützung

font-palette und @font-palette-values werden in Safari seit Version 15.4 unterstützt und sind in Chrome und Edge mit der Veröffentlichung von Version 101 erschienen.

Anwendungsfälle

Sie können sich wahrscheinlich schon vorstellen, wie Sie Farbschriften in Ihren eigenen Projekten verwenden könnten. Es gibt jedoch ein paar spezifische Anwendungsfälle, die es wert sind, erwähnt zu werden.

COLR und Icon-Schriften

Icon-Schriften sind möglicherweise nicht mehr die beliebteste Methode zur Anzeige von Icons im Web (Chris erklärt warum), aber sie werden immer noch häufig verwendet. Wenn Sie eine Icon-Schriftart mit mehreren Farben verwenden, wie Duotone von FontAwesome oder die zweifarbigen Icons von Material Design, könnte font-palette eine einfachere Methode zur Anpassung bieten.

Das Emoji-Problem lösen

Nolan Lawson schrieb kürzlich über die Probleme bei der Verwendung nativer Emojis im Web. Das Chrome Developer Blog erklärt eine eher komplexe aktuelle Lösung

Wenn Sie benutzergenerierte Inhalte unterstützen, verwenden Ihre Benutzer wahrscheinlich Emojis. Heute ist es sehr üblich, Text zu scannen und jedes gefundene Emoji durch Bilder zu ersetzen, um eine konsistente plattformübergreifende Darstellung zu gewährleisten und neuere Emojis unterstützen zu können, als das Betriebssystem unterstützt. Diese Bilder müssen dann bei Kopiervorgängen wieder in Text umgewandelt werden.

Wenn COLRv1-Emoji-Schriften eine größere Browserunterstützung erhalten, bieten sie einen viel einfacheren Ansatz. COLRv1 bietet auch den Vorteil, bei jeder Größe gestochen scharf auszusehen, während native Browser-Emojis bei größeren Schriftgrößen verschwommen und verpixelt werden.

Zusammenfassung

Vor Farbschriften war die typografische Kreativität im Web auf das Anwenden von Konturen oder Verlaufslinien mit CSS beschränkt. Mit einer Vektor-Grafik konnte man schon immer etwas Individuelleres machen, aber das ist kein richtiger Text – er kann nicht vom Benutzer ausgewählt und in die Zwischenablage kopiert werden, er kann nicht mit Befehl+F auf der Seite durchsucht werden, er wird nicht von Screenreadern oder Suchmaschinen gelesen, und man müsste Adobe Illustrator öffnen, nur um den Text zu bearbeiten.

Farbschriften haben das Potenzial, die Aufmerksamkeit eines Benutzers wirklich zu fesseln, was sie perfekt für Landingpages und Banner macht. Sie werden vielleicht nicht oft verwendet, aber sie versprechen neue expressive und kreative Möglichkeiten für das Webdesign, die Ihre Website hervorheben können.