Enligt Toshi Omagari, författaren till Arcade Game Typography, världens första flerfärgade digitala typsnittet skapades 1982 för ett aldrig släppt videospel som heter Insector. Flerfärgade typsnitt, ibland kallade kromatisk typ, är fortfarande relativt sällsynta på webben, även om COLR teckensnittsformat har haft fullt stöd för flera webbläsare sedan 2018 (även i Internet Explorer!).

Tekniken öppnar upp en helt ny anda av typografisk kreativitet. Även om några av de färgteckensnitt jag har sett har varit läskiga, är kromatiska typsnitt i bästa fall roliga, innovativa och fånga uppmärksamhet. Med både tillägget av en ny CSS-funktion — inklusive font-palette egendom och @font-palette-values regel — för att kontrollera färgpaletten för färgteckensnitt och utvecklingen av COLR-teckensnittsformatet är det ett bra tillfälle att dyka in och experimentera med vad modern webbtypografi kan göra.

COLR-stöd

jag varar skrev om färgtypsnitt år 2018. Då fanns det fyra olika standarder för flerfärgade typsnitt: OpenType-SVG, COLR, SBIX och CBDT/CBLC. Du kan använda ChromaCheck för att se vilka färgteckensnittsformat din egen webbläsare stöder.

Google Chrome har markerade OpenType-SVG som "vana fixar" vilket innebär att formatet aldrig kommer att stödjas av Chrome eller Edge. SBIX och CBDT/CBLC kan för det mesta ignoreras för användning på webben eftersom de båda är baserade på rasterbilder och blir suddiga vid större teckenstorlekar. Den stora filstorleken på bitmappsbaserade teckensnitt gör dem också till ett dåligt val för webben.

Ulrike Rausch är skaparen av LiebeHeide, ett bitmappsfärgteckensnitt som kusligt replikerar utseendet på en kulspetspenna. "Mitt största mål var alltid att återge handskriven text så autentiskt som möjligt", sa hon till mig. ”För LiebeHeide kunde jag äntligen simulera dessa handgjorda attribut med ett typsnitt. Nackdelen? Alla PNG-bilder i teckensnittsfilen läggs ihop och resulterar i en enorm OTF-filstorlek. Detta kanske inte är ett problem för skrivbordsprogram, som Adobe InDesign, men för användning på webben är typsnittet knappast tillämpligt."

Alla webbläsare stöder COLR-teckensnitt (nu allmänt kallade COLRv0). Version 98 av Chrome (och Edge), som släpptes i februari, lade till stöd för COLRv1, en utveckling av formatet.

COLRv0 och COLRv1

COLRv1 är en del av OpenType 1.9 standard. Medan den initiala COLRv0 saknade många av de kreativa möjligheterna med OpenType-SVG, matchar COLRv1 dessa möjligheter samtidigt som man undviker vissa nackdelar. COLRv0, till exempel, kunde bara göra solida färger medan COLRv1 kan göra linjär, radiell, och koniska gradienter. Formatet lägger också till sammansättning och blandning och möjliggör återanvändning av form för att spara på filstorlek.

Typografiexpert Roel Nieskins förklarar: "Jag brukade säga att OpenType-SVG-formatet var det bästa formatet eftersom det erbjöd den största mångsidigheten - tills jag insåg att detta är alldeles för komplicerat för ett jobb på låg nivå som textåtergivning. Den implementerar en grundläggande delmängd av SVG på teckensnittsrenderingsnivån. Men det fungerar inte bra med annan typsnittsteknik (antydningar, variabla axlar, etc.), och det är jobbigt att implementera. Så jag bytte sida till COLR. COLR återanvänder i princip allt som OpenType-teckensnitt redan har. Den lägger "bara" till lager, och möjligheten att ändra färgen på varje lager. Enkel men effektiv."

COLRv1 är helt kompatibel med variabla teckensnittsaxlar, och det finns redan exempel på variabla COLR-teckensnitt som Meritmärke, Plakato färg och Rocher färg.

Här är ett slående exempel från Ulrike Rausch på vad som är möjligt med formatet, ett (för närvarande ej släppt) typsnitt som digitalt återskapar utseendet på en neonskylt:

Akiem Helmling av typen gjuteri Underware är förälskad i COLRv1 och säger till mig att "COLRv1-formatet potentiellt kan ha en liknande (eller till och med större) inverkan på typdesignen än variabla teckensnitt haft under de senaste åren." För Akiem är det utan tvekan det överlägsna formatet. "Alla tidigare färgformat har varit dåliga hacks för att lägga till färger till glyfer. Även om OpenType-SVG av vissa människor betraktas som en bra lösning, är det, ur min synvinkel, inte alls. Ur en pragmatisk synvinkel är SVG ett "låst rum" inom OpenTypes öppna struktur. Det finns inget sätt att återanvända eller länka data eller att skapa en koppling mellan andra teckensnittstabeller och SVG-tabellen. Och på grund av detta kan vi inte skapa ett variabelt teckensnitt med variabel SVG-data."

Det är fortfarande tidiga dagar för formatet. Mozilla har ännu inte skickat COLRv1 men har tagit en positiv position på formatet och anger att det har "potentialen att ersätta OpenType-SVG-teckensnitt vid webbanvändning." Apple är ovilliga att implementera det i Safari.

COLRv1-teckensnitt kommer fortfarande att visas och vara läsbara i dessa webbläsare, men alla bokstäver kommer att ha en enda enfärgad färg (som du kan ställa in med CSS color egenskap, precis som med ett vanligt typsnitt). Vi har ännu inte sett många typgjuterier släppa COLRv1-typsnitt, och vissa populära designverktyg som Figma stöder inte ens COLRv0, men jag är hoppfull och tror att det kommer att bli framtiden för färgtypografi på webben. Under den korta tid COLRv1 har funnits har det redan funnits några vackra exempel på vad tekniken kan göra, som t.ex. Reem Kufi och Bradley initialer.

COLR och CSS

Om du använder ett färgteckensnitt vill du förmodligen kunna kontrollera dess färger. Fram till nu var det omöjligt att göra med CSS. De font-palette egenskapen ger möjligheten att åsidosätta standardfärgschemat för ett typsnitt och tillämpa ditt eget. Den här egenskapen fungerar på typsnitten COLRv0 och COLRv1. (Apples Myles Maxfield förklarar att SVG-teckensnitt kan opt-in att använda paletter, medan alla färger i ett COLR-typsnitt är det automatiskt åsidosatt av CSS.)

Att komma med en anständig färgpalett är en fin konst. Vissa typdesigners har gjort det hårda arbetet åt oss och inkluderar alternativa paletter inuti typsnittet. Du kan välja mellan dessa olika färgscheman med hjälp av base-palette i CSS.

Hur tar du reda på om ett teckensnitt erbjuder en alternativ palett? Webbplatsen för typsnittet kan berätta. Om inte, finns det ett praktiskt verktyg som heter Wakamai Fondue som kommer att lista alla tillgängliga färgscheman (visas i bilden nedan). För det här exemplet ska jag använda Rocher färg, ett gratis typsnitt med variabel färg från Henrique Beier med en Flintstones-vibe. Från att titta på Wakamai Foundue kan vi se att detta typsnitt använder fyra färger och kommer med elva olika palettalternativ.

Använda base-palette: 0 kommer att välja standardfärgpalett (i fallet Rocher, det är nyanser av orange och en brun).

Använda base-palette: 1 kommer att välja den första alternativa paletten som definierats av skaparen av typsnittet, och så vidare. I följande kodexempel väljer jag en färgpalett som har olika nyanser av grått:

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

När du har valt en palett med CSS @font-palette-values regeln kan du tillämpa den med hjälp av font-palette fast egendom:

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

Naturligtvis kanske du vill skapa din egen palett för att matcha ditt varumärkes färger eller för att möta din egen designkänslighet. Om du ska åsidosätta alla färger behöver du inte ange base-palette.

Låt oss ta Bungee från banbrytande typdesigner David Jonathan Ross som ett exempel. Den använder bara två färger som standard, röd och vit. I följande exempel åsidosätter jag båda färgerna i teckensnittet, så att base-palette spelar ingen roll och utelämnas:

 @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;
}

Alternativt kan du ställa in base-palette som utgångspunkt och selektivt ändra bara några av färgerna. Nedan använder jag den grå färgpaletten från Rocher, men åsidosätter en färg med en mintgrö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;
}

När du specificerar override-colors det är svårt att veta vilken bit av teckensnittet som kommer att åsidosättas av vilket nummer — du måste leka och experimentera och uppnå önskad effekt genom att trial and error.

Om du vill kan du till och med ändra färgen på emoji-teckensnitt, som t.ex Twemoji (visas nedan) eller Noto. Här är en rolig demo från en teckensnittsingenjör på Google.

Aktuella begränsningar

En beklaglig begränsning, åtminstone för närvarande, är att anpassade CSS-egenskaper inte fungerar i @font-palette-values. Det betyder att följande är ogiltigt:

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

En annan begränsning: animationer och övergångar från en font-palette till en annan interpolera inte — vilket innebär att du kan växla direkt från en palett till en annan, men inte gradvis kan animera mellan dem. Min dröm om ett läskigt animerat emoji-font är tyvärr orealiserat.

Webbläsarstöd

font-palette och @font-palette-values har stöds i Safari sedan version 15.4 och landade i Chrome och Edge med releasen av version 101.

Användningsfall

Du kan förmodligen redan föreställa dig hur du kan använda färgteckensnitt i dina egna projekt. Det finns dock ett par specifika användningsfall som är värda att nämna.

COLR och ikon teckensnitt

Ikonteckensnitt kanske inte längre är den mest populära metoden för att visa ikoner på webben (Chris förklarar varför) men de används fortfarande i stor utsträckning. Om du använder ett ikonteckensnitt med flera färger, som Duotone från FontAwesome eller tvåfärgsikonerna från material design, font-palette skulle kunna erbjuda en enklare metod för anpassning.

Löser emojiproblemet

Nolan Lawson skrev nyligen om problem med att använda emoji på webben. De Chrome-utvecklarblogg förklarar en ganska komplex nuvarande lösning:

Om du stöder användargenererat innehåll använder dina användare förmodligen emojis. Idag är det mycket vanligt att skanna text och ersätta alla emoji som stöter på med bilder för att säkerställa konsekvent plattformsoberoende rendering och möjligheten att stödja nyare emojis än vad operativsystemet stöder. Dessa bilder måste sedan växlas tillbaka till text under urklippsoperationer.

Om den får större webbläsarstöd kommer COLRv1 emoji-teckensnitt att erbjuda ett mycket enklare tillvägagångssätt. COLRv1 kommer också med fördelen att se skarp ut i alla storlekar, medan inbyggda webbläsareemojis blir suddiga och pixlade vid större teckenstorlekar.

Inslagning upp

Innan färgteckensnitt var typografisk kreativitet på webben begränsad till att tillämpa streck eller gradientfyllningar med CSS. Du kan alltid göra något mer anpassat med en vektorbild, men det är inte riktig text — den kan inte väljas av användaren och kopieras till urklipp, den kan inte sökas på sidan med Kommando+F, den läses inte av skärmläsare eller sökmotorer, och du måste öppna Adobe Illustrator bara för att redigera kopian.

Färgteckensnitt har potential att verkligen fånga en användares uppmärksamhet, vilket gör dem perfekta för målsidor och banners. De kanske inte är något du når ofta, men de lovar nya uttrycksfulla och kreativa möjligheter för webbdesign som kan få din sida att sticka ut.