COLRv1 and CSS font-palette | Style-Tricks

In response to Toshi Omagari, the writer of Arcade Sport Typography, the world’s first multi-colored digital font was created in 1982 for a never-released online game known as Insector. Multi-colored fonts, typically known as chromatic type, are nonetheless comparatively uncommon on the internet, regardless that the COLR font format has had full cross-browser help since 2018 (even in Web Explorer!).

The expertise opens up a wholly new vein of typographic creativity. Whereas among the colour fonts I’ve seen have been lurid, at greatest, chromatic fonts are enjoyable, progressive and attention-grabbing. With each the addition of a brand new CSS options — together with the font-palette property and @font-palette-values rule — for controlling the colour palette of colour fonts and the evolution of the COLR font format, it’s a good time to dive in and experiment with with what fashionable net typography can do.

Hello in a cursive rainbow color font.

COLR help

I final wrote about colour fonts in 2018. On the time, there have been 4 totally different requirements for multicolored typefaces: OpenType-SVG, COLR, SBIX, and CBDT/CBLC. You should utilize ChromaCheck to see what colour font codecs your individual browser helps.

Google Chrome has marked OpenType-SVG as “wontfix” that means that format won’t ever be supported by Chrome or Edge. SBIX and CBDT/CBLC can principally be ignored to be used on the internet as they’re each primarily based on raster photos and develop into blurry at bigger font sizes. The big file dimension of bitmap-based fonts additionally makes them a foul selection for the net.

Ulrike Rausch is the creator of LiebeHeide, a bitmap colour font which uncannily replicates the look of a ballpoint pen. “My greatest aim was all the time to breed handwritten textual content as authentically as doable,” she instructed me. “For LiebeHeide, I used to be lastly in a position to simulate these handmade attributes with a font. The draw back? All of the PNG photos within the font file add up and end in an unlimited OTF file dimension. This won’t be an issue for desktop functions, like Adobe InDesign, however to be used on the internet the font is hardly relevant.”

All browsers help COLR fonts (now usually known as COLRv0). Model 98 of Chrome (and Edge), launched in February, added help for COLRv1, an evolution of the format.

Desktop

Chrome Firefox IE Edge Safari
71 32 9 12 11

Cell / Pill

Android Chrome Android Firefox Android iOS Safari
101 100 101 11.0-11.2

COLRv0 and COLRv1

Screenshot of font.
Plakato from Underware foundry

COLRv1 is a part of the OpenType 1.9 standard. Whereas the preliminary COLRv0 lacked most of the inventive potentialities of OpenType-SVG, COLRv1 matches these potentialities whereas avoiding sure drawbacks. COLRv0, for instance, may solely do strong colours whereas COLRv1 can do linear, radial, and conic gradients. The format additionally provides compositing and blending and permits for form reuse to save lots of on file dimension.

Typography skilled Roel Nieskins explains: “I used to say the OpenType-SVG format was the perfect format because it provided probably the most versatility — till I spotted that is simply too advanced for a low-level job like textual content rendering. It implements a primary subset of SVG on the font rendering stage. However it doesn’t work nicely with different font tech (hinting, variable axes, and so on.), and it’s a ache to implement. So, I switched sides to COLR. COLR mainly re-uses every part that OpenType fonts have already got. It ‘solely’ provides layering, and the chance to vary the colour of every layer. Easy, however efficient.”

COLRv1 is fully appropriate with variable font axes, and there are already examples of variable COLR fonts like Merit Badge, Plakato Color and Rocher Color.

Right here’s a hanging instance from Ulrike Rausch of what’s doable with the format, a (at present unreleased) typeface which digitally recreates the look of a neon signal:

Screenshot of COLR font in bright pink against light and dark backgrounds.

Akiem Helmling of the kind foundry Underware is enamored with COLRv1, telling me that “[t]he COLRv1 format can probably have the same (and even greater) impression on kind design than variable fonts had lately.” For Akiem, it’s undoubtedly the superior format. “All former colour codecs have been dangerous hacks so as to add colours to glyphs. Whereas OpenType-SVG is regarded by some folks as a great resolution, it’s, from my viewpoint, by no means. From a realistic viewpoint, SVG is a ‘locked room’ throughout the open construction of OpenType. There is no such thing as a approach to re-use or hyperlink knowledge or to create a connection between different font tables and the SVG desk. And due to this, we can’t make a variable font with variable SVG knowledge.”

It’s nonetheless early days for the format. Mozilla hasn’t but shipped COLRv1 however has taken a positive position on the format, stating that it has “the potential to supersede OpenType-SVG fonts in net use.” Apple is reluctant to implement it in Safari.

COLRv1 fonts will nonetheless present up and be readable in these browsers however all of the letter’s might be a single strong colour (which you’ll be able to set with the CSS colour property, similar to with a standard font). We’re but to see many kind foundries launch COLRv1 typefaces, and a few common design instruments like Figma don’t even help COLRv0, however I’m hopeful and consider it is going to be the way forward for colour typography on the internet. Within the quick time COLRv1 has been round there have already been some lovely examples of what the expertise can do, akin to Reem Kufi and Bradley Initials.

COLR and CSS

For those who’re utilizing a colour font, you most likely need to have the ability to management its colours. Till now, that was not possible to do with CSS. The font-palette property brings the ability to override the default colour scheme of a typeface and apply your individual. This property works on COLRv0 and COLRv1 typefaces. (Apple’s Myles Maxfield explains that SVG fonts can opt-in to utilizing palettes, whereas all the colours of a COLR typeface are robotically overridden by CSS.)

Developing with an honest colour palette is a fantastic artwork. Some kind designers have executed the arduous work for us and embrace various palettes contained in the font. You’ll be able to choose from these totally different colour schemes utilizing base-palette in CSS.

How do you discover out if a font gives an alternate palette? The location for the font may inform you. If not, there’s a useful instrument known as Wakamai Fondue that can record all of the out there colour schemes (proven within the picture beneath). For this instance, I’ll use Rocher Color, a free variable colour font from Henrique Beier with a Flintstones vibe. From taking a look at Wakamai Foundue we are able to see that this typeface makes use of 4 colours and comes with eleven totally different palette choices.

Grid of hex color values.

Utilizing base-palette: 0 will choose the default colour palette (within the case of Rocher, that’s shades of orange and a brown).

Rocher COLR font.

Utilizing base-palette: 1 will choose the primary various palette outlined by the creator of the typeface, and so forth. Within the following code instance, I’m deciding on a colour palette that’s totally different shades of grey:

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

When you’ve chosen a palette with the CSS @font-palette-values rule, you possibly can apply it utilizing the font-palette property:

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

In fact, you may need to create your individual palette to match your model colours or to fulfill your individual design sensibility. For those who’re going to override all the colours then you definately don’t have to specify the base-palette.

Let’s take Bungee from pioneering kind designer David Jonathan Ross for instance. It solely makes use of two colours by default, crimson and white. Within the following instance, I’m overriding each colours of the font, so the base-palette doesn’t matter and is omitted:

 @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;
}
The word color in pink and fonts in light gray against a pink-saturated photo background.

Alternatively, you possibly can set the base-palette as a place to begin and selectively change simply among the colours. Beneath I’m utilizing the grey colour palette of Rocher, however overriding one colour with a minty inexperienced:

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

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

When specifying override-colors it’s tough to know which little bit of the font might be overridden by which quantity — it’s important to mess around and experiment and obtain the specified impact by means of trial and error.

Rocher COLR font.

Must you want, you possibly can even change the colour of emoji fonts, akin to Twemoji (proven beneath) or Noto. Right here’s a fun demo from a font engineer at Google.

Brown illustrated cartoon dog with green ears and tongue.

Present limitations

One regrettable limitation, a minimum of in the intervening time is that CSS customized properties don’t work in @font-palette-values. Meaning the next is invalid:

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

One other limitation: animations and transitions from one font-palette to a different don’t interpolate — that means you possibly can change immediately from one palette to a different, however can’t step by step animate between them. My dream of a luridly animated emoji font is unfortunately unrealized.

Browser help

font-palette and @font-palette-values have been supported in Safari since model 15.4, and landed in Chrome and Edge with the discharge of model 101.

Desktop

Chrome Firefox IE Edge Safari
101 No No No 15.4

Cell / Pill

Android Chrome Android Firefox Android iOS Safari
101 No 101 15.4

Use circumstances

You’ll be able to most likely already think about the way you may use colour fonts in your individual tasks. There are a few particular use circumstances, although, which can be value calling out.

COLR and icon fonts

Icon fonts might now not be the preferred methodology for displaying icons on the internet (Chris explains why) however they’re nonetheless extensively used. For those who use an icon font with a number of colours, like Duotone from FontAwesome or the two-tone icons from Material Design, font-palette may provide a better methodology for personalization.

Grid of Duotone icons.

Fixing the emoji downside

Nolan Lawson just lately wrote concerning the problems of using emoji on the web. The Chrome developer blog explains one fairly advanced present resolution:

For those who help consumer generated content material, your customers most likely use emojis. In the present day it’s quite common to scan textual content and change any emoji encountered with photos to make sure constant cross-platform rendering and the power to help newer emojis than the OS helps. These photos then must be switched again to textual content throughout clipboard operations.

If it receives better browser help, COLRv1 emoji fonts will provide a far easier strategy. COLRv1 additionally comes with the good thing about trying crisp at any dimension, whereas native browser emojis get blurry and pixelated at bigger font sizes.

Wrapping up

Earlier than colour fonts, typographic creativity on the internet was restricted to making use of strokes or gradient fills with CSS. You might all the time do one thing extra customized with a vector picture, however that’s not actual textual content — it could actually’t be chosen by the consumer and copied to the clipboard, it could actually’t be searched on the web page with Command+F, it isn’t learn by display screen readers or search engines like google, and also you’d have to open Adobe Illustrator simply to edit the copy.

Colour fonts have the potential to essentially seize a consumer’s consideration, making them good for touchdown pages and banners. They will not be one thing you attain for sometimes, however they promise new expressive and artistic potentialities for net design that may make your website stand out.



Add a Comment

Your email address will not be published. Required fields are marked *