Zephyrnet-Logo

COLRv1 und CSS-Font-Palette: Web-Typografie wird bunt

Datum:

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

Screenshot der Schriftart.
Plakato von der Underware-Gießerei

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:

Screenshot der Schriftart COLR in leuchtendem Pink vor hellem und dunklem Hintergrund.

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.

Raster von Hex-Farbwerten.

Die richtigen base-palette: 0 wählt die Standardfarbpalette aus (im Fall von Rocher sind das Orange- und Brauntöne).

Rocher COLR-Schriftart.

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;
}
Die Wortfarbe in Pink und Schriften in Hellgrau vor einem pinkgesättigten Fotohintergrund.

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.

Rocher COLR-Schriftart.

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.

Braun illustrierter Cartoon-Hund mit grünen Ohren und Zunge.

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.

Raster von Duotone-Symbolen.

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.

spot_img

Neueste Intelligenz

spot_img