Laut Toshi Omagari, dem Autor von Arcade Game Typography, ist die Welt erste mehrfarbige digitale Schrift wurde 1982 für ein nie veröffentlichtes Videospiel namens Insector erstellt. Mehrfarbige Schriftarten, manchmal auch genannt chromatischer Typ, sind immer noch relativ selten im Internet, obwohl die COLR-Schriftformat hat seit 2018 volle Cross-Browser-Unterstützung (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, grell waren, sind chromatische Schriften bestenfalls lustig, innovativ und aufmerksamkeitsstark. Mit dem Hinzufügen neuer CSS-Funktionen – einschließlich der font-palette
Eigentum und @font-palette-values
Regel — Um die Farbpalette von Farbschriften und die Entwicklung des COLR-Schriftformats zu steuern, ist es eine großartige Zeit, um einzutauchen und damit zu experimentieren, was moderne Web-Typografie leisten kann.
COLR-Unterstützung
Ich dauere schrieb über Farbschriften im Jahr 2018. Damals gab es vier verschiedene Maßstäbe für mehrfarbige Schriften: OpenType-SVG, COLR, SBIX und CBDT/CBLC. Sie können verwenden ChromaCheck um zu sehen, welche Farbschriftformate Ihr eigener Browser unterstützt.
Google Chrome hat als „wontfix“ gekennzeichnetes OpenType-SVG Das 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 unscharf werden. Die große Dateigröße Bitmap-basierter Schriftarten macht sie auch zu einer schlechten Wahl für das Web.
Ulrike Rausch ist der Schöpfer von Liebe Heide, eine Bitmap-Farbschrift, die auf unheimliche Weise das Aussehen eines Kugelschreibers nachahmt. „Mein größtes Ziel war es immer, handgeschriebenen Text so authentisch wie möglich wiederzugeben“, erzählt sie mir. „Für LiebeHeide konnte ich diese handgemachten Attribute endlich mit einer Schrift simulieren. Der Nachteil? Alle PNG-Bilder in der Schriftartdatei summieren sich und ergeben eine enorme OTF-Dateigröße. Für Desktop-Anwendungen wie Adobe InDesign mag das kein Problem sein, aber für den Einsatz im Web ist die Schriftart kaum geeignet.“
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 Unterstützung für COLRv1 hinzu, eine Weiterentwicklung des Formats.
Diese Browserunterstützungsdaten stammen von Kann ich benutzen, die mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
71 | 32 | 9 | 12 | 11 |
Handy / Tablet
Android-Chrome | Android-Firefox | Android | iOS Safari |
---|---|---|---|
101 | 100 | 101 | 11.0-11.2 |
COLRv0 und COLRv1
COLRv1 ist Teil der OpenType 1.9-Standard. Während dem ursprünglichen COLRv0 viele der kreativen Möglichkeiten von OpenType-SVG fehlten, entspricht COLRv1 diesen Möglichkeiten, während bestimmte Nachteile vermieden werden. COLRv0 könnte beispielsweise nur Volltonfarben darstellen, wohingegen COLRv1 dies kann linear, radial, und konische Steigungen. Das Format fügt auch hinzu Compositing und Blending und ermöglicht die Wiederverwendung von Formen, um Dateigröße zu sparen.
Experte für Typografie Roel Nieskins erklärt: „Früher habe ich gesagt, dass das OpenType-SVG-Format das beste Format ist, da es die größte Vielseitigkeit bietet – bis mir klar wurde, dass dies für eine Low-Level-Aufgabe wie das Rendern von Text einfach zu komplex ist. Es implementiert eine grundlegende Teilmenge von SVG auf der Schriftwiedergabeebene. Aber es funktioniert nicht gut mit anderen Font-Technologien (Hinweise, variable Achsen usw.) und es ist mühsam zu implementieren. Also wechselte ich die Seite zu COLR. COLR verwendet im Grunde alles wieder, was OpenType-Schriftarten bereits haben. Es fügt „nur“ Schichten hinzu und die Möglichkeit, die Farbe jeder Schicht zu ändern. Einfach aber effektiv."
COLRv1 ist vollständig kompatibel mit variablen Schriftachsen, und es gibt bereits Beispiele für variable COLR-Schriftarten wie Ehrenabzeichen, Plakato-Farbe und Rocher-Farbe.
Hier ist ein eindrucksvolles Beispiel von Ulrike Rausch, was mit dem Format möglich ist, einer (derzeit unveröffentlichten) Schrift, die das Aussehen einer Leuchtreklame digital nachbildet:
Akiem Helmling von der Schriftgießerei Unterwäsche ist von COLRv1 begeistert und sagt mir, dass „das COLRv1-Format möglicherweise einen ähnlichen (oder sogar größeren) Einfluss auf das Schriftdesign haben kann, wie es variable Schriftarten in den letzten Jahren hatten.“ Für Akiem ist es zweifellos das überlegene Format. „Alle früheren Farbformate waren schlechte Hacks, um Glyphen Farben hinzuzufügen. Während OpenType-SVG von manchen als gute Lösung angesehen wird, ist es das aus meiner Sicht überhaupt nicht. Aus pragmatischer Sicht ist SVG ein „verschlossener 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. Aus diesem Grund können wir keine variable Schriftart mit variablen SVG-Daten erstellen.“
Das Format steckt noch in den Kinderschuhen. Mozilla hat COLRv1 noch nicht ausgeliefert, aber eine vorgenommen positive Stellung über das Format und erklärt, dass es „das Potenzial hat, OpenType-SVG-Schriftarten in der Webnutzung zu ersetzen“. Apple zögert, es in Safari zu implementieren.
COLRv1-Schriftarten werden in diesen Browsern weiterhin angezeigt und sind lesbar, aber alle Buchstaben haben eine einzelne Volltonfarbe (die Sie mit CSS festlegen können color
-Eigenschaft, genau wie bei einer normalen Schriftart). Wir müssen noch sehen, dass viele Schrifthersteller COLRv1-Schriften veröffentlichen, und einige beliebte Designtools wie Figma unterstützen COLRv0 nicht einmal, aber ich bin zuversichtlich und glaube, dass dies die Zukunft der Farbtypografie im Web sein wird. In der kurzen Zeit, in der es COLRv1 gibt, gab es bereits einige schöne Beispiele dafür, was die Technologie leisten kann, wie z Reem Kufi und Bradley-Initialen.
COLR und CSS
Wenn Sie eine Farbschrift verwenden, möchten Sie wahrscheinlich ihre Farben steuern können. Bisher war das mit CSS nicht möglich. Das font-palette
-Eigenschaft bietet die Möglichkeit, das Standardfarbschema einer Schriftart zu überschreiben und Ihr eigenes anzuwenden. Diese Eigenschaft funktioniert mit den Schriftarten COLRv0 und COLRv1. (Äpfel Myles Maxfield erklärt, dass SVG-Schriftarten dies können Opt-in Paletten zu verwenden, wohingegen alle Farben einer COLR-Schrift sind Im Prinzip so, wie Sie es von Google Maps kennen. von CSS überschrieben.)
Eine anständige Farbpalette zu finden, ist eine hohe Kunst. Einige Schriftdesigner haben die harte Arbeit für uns erledigt und alternative Paletten in die Schriftart integriert. Aus diesen verschiedenen Farbschemata können Sie mit auswählen base-palette
im CSS-Format.
Wie finden Sie heraus, ob eine Schriftart eine alternative Palette bietet? Die Website für die Schriftart könnte es Ihnen sagen. Wenn nicht, gibt es ein praktisches Tool namens Wakamai-Fondue Dadurch werden alle verfügbaren Farbschemata aufgelistet (siehe Abbildung unten). Für dieses Beispiel verwende ich Rocher-Farbe, eine kostenlose Schriftart mit variabler Farbe von Henrique Beier mit Flintstones-Vibe. Wenn wir uns Wakamai Foundue ansehen, können wir sehen, dass diese Schrift vier Farben verwendet und elf verschiedene Palettenoptionen bietet.
Die richtigen base-palette: 0
wählt die Standardfarbpalette aus (im Fall von Rocher sind das Orange- und Brauntöne).
Die richtigen base-palette: 1
wählt die erste alternative Palette aus, die vom Ersteller der Schrift definiert wurde, und so weiter. Im folgenden Codebeispiel wähle ich eine Farbpalette mit verschiedenen Graustufen aus:
@font-palette-values --Grays {
font-family: Rocher;
base-palette: 9;
}
Sobald Sie eine Palette mit dem CSS ausgewählt haben @font-palette-values
Regel, Sie können es mit der anwenden font-palette
Eigentum:
.grays {
font-family: 'Rocher';
font-palette: --Grays;
}
Natürlich möchten Sie vielleicht erstellen Ihre eigenen Farbpalette passend zu Ihren Markenfarben oder Ihrer eigenen Design-Sensibilität. Wenn Sie alle Farben überschreiben möchten, müssen Sie die nicht angeben base-palette
.
Lass uns nehmen Bungee vom bahnbrechenden Schriftdesigner David Jonathan Ross als Beispiel. Es verwendet standardmäßig nur zwei Farben, Rot und Weiß. Im folgenden Beispiel überschreibe ich beide Farben der Schriftart, also die base-palette
spielt keine Rolle und wird weggelassen:
@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 die einstellen base-palette
als Ausgangspunkt und ändern Sie selektiv nur einige der Farben. Unten verwende ich die graue Farbpalette von Rocher, überschreibe aber eine Farbe mit einem Minzgrün:
@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 override-colors
Es ist schwierig zu wissen, welches Bit der Schriftart durch welche Zahl ü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, z Twemoji (siehe unten) oder Noto. Hier ist ein lustige Demo von einem Font-Ingenieur bei Google.
Aktuelle Einschränkungen
Eine bedauerliche Einschränkung, zumindest im Moment, ist, dass benutzerdefinierte CSS-Eigenschaften nicht funktionieren @font-palette-values
. Das bedeutet, dass Folgendes 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 aus einem font-palette
zu einer anderen interpolieren nicht – das heißt, Sie können sofort von einer Palette zur anderen wechseln, aber nicht allmählich zwischen ihnen animieren. Mein Traum von einer grell animierten Emoji-Schrift wird leider nicht verwirklicht.
Browser-Unterstützung
font-palette
und @font-palette-values
werden in Safari seit Version 15.4 unterstützt und sind darin gelandet Chrome und Edge mit der Veröffentlichung der Version 101.
Diese Browserunterstützungsdaten stammen von Kann ich benutzen, die mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
101 | Nein | Nein | Nein | 15.4 |
Handy / Tablet
Android-Chrome | Android-Firefox | Android | iOS Safari |
---|---|---|---|
101 | Nein | 101 | 15.4 |
Anwendungsszenarien
Wahrscheinlich können Sie sich bereits vorstellen, wie Sie farbige Schriften in Ihren eigenen Projekten verwenden könnten. Es gibt jedoch ein paar spezifische Anwendungsfälle, die es wert sind, genannt zu werden.
COLR- und Icon-Fonts
Symbolschriftarten sind möglicherweise nicht mehr die beliebteste Methode zum Anzeigen von Symbolen im Web (Chris erklärt warum), aber sie sind immer noch weit verbreitet. Wenn Sie eine Symbolschrift mit mehreren Farben verwenden, wie Duotone von FontAwesome oder die zweifarbigen Symbole von Material Design, font-palette
könnte eine einfachere Methode zur Anpassung bieten.
Das Emoji-Problem lösen
Nolan Lawson schrieb kürzlich über die Probleme bei der Verwendung von Emojis im Webdem „Vermischten Geschmack“. Seine Chrome-Entwicklerblog erklärt eine ziemlich komplexe aktuelle Lösung:
Wenn Sie benutzergenerierte Inhalte unterstützen, verwenden Ihre Benutzer wahrscheinlich Emojis. Heutzutage ist es üblich, Text zu scannen und alle gefundenen Emojis durch Bilder zu ersetzen, um ein konsistentes plattformübergreifendes Rendering und die Fähigkeit zu gewährleisten, neuere Emojis zu unterstützen, als das Betriebssystem unterstützt. Diese Bilder müssen dann während der Zwischenablageoperationen wieder in Text umgewandelt werden.
Wenn es eine größere Browserunterstützung erhält, bieten COLRv1-Emoji-Schriftarten einen weitaus einfacheren Ansatz. COLRv1 hat auch den Vorteil, dass es in jeder Größe scharf aussieht, während native Browser-Emojis bei größeren Schriftgrößen verschwommen und pixelig werden.
Wrapping up
Vor Farbschriftarten beschränkte sich die typografische Kreativität im Web auf das Anwenden von Strichen oder Verlaufsfüllungen mit CSS. Sie könnten mit einem Vektorbild immer etwas Individuelleres machen, aber das ist kein echter Text – es kann nicht vom Benutzer ausgewählt und in die Zwischenablage kopiert werden, es kann nicht auf der Seite mit gesucht werden Befehl+F, es wird nicht von Screenreadern oder Suchmaschinen gelesen, und Sie müssen Adobe Illustrator öffnen, nur um die Kopie zu bearbeiten.
Farbschriftarten haben das Potenzial, die Aufmerksamkeit eines Benutzers wirklich zu erregen, was sie perfekt für Zielseiten und Banner macht. Sie sind vielleicht etwas, wonach Sie nicht oft greifen, aber sie versprechen neue ausdrucksstarke und kreative Möglichkeiten für das Webdesign, die Ihre Website hervorheben können.