Variable color fonts: How do they work?

A tiny guide to Variable Color Fonts

Variable color fonts, how do they work? What can you do with them? Are they going to change the web? Well I don’t know all answers, but I’ll give you an initiation. I hope this tiny guide, combined with links to pieces written by people much smarter than me, will clear up some things!

As variable color fonts are fairly new, there is much to explore. What are the limits, how do browsers handle them? And as fonts can become much more than just letters, the adventure doesn’t end at the ‘A to Z’. So scroll along, and if you want to give it a go yourself, at the end you find an asset pack which includes font files and an example webpage!

Need some inspiration?
Have a look at my Variable Color Font Experiments

Want to create typefaces? Glyphs offers a free trail and many tutorials:
www.glyphsapp.com

Letters or Illustrations

About fonts

In basic terms, fonts are little else than vector drawings, drawn on small artboards, each assigned to unicodes (universal markers). It’s this which allows you to type a letter with your keyboard! Of course there are other things included in a font such as the spacing, but it’s the vectors that makes it exciting. This way a typeface can be scaled indefinitely, but it also allows you to draw anything you would like!

So drawing the paths, I created illustrations instead of letters, which made the perfect subjects for variable color font experiments.

Variable fonts and illustrations

About variable fonts

To be able to transform, variable fonts use a method called interpolation, which automatically creates new instances of a letter between two existing drawings. For this, both drawings have to consist of exactly the same amount of points and handles, as you can’t interpolate into the void!

Normally, the designer chooses a certain weight or position to interpolate into a final (static) design, but with a variable font, this interpolation becomes fluid, which the user can adjust. With a variable font both you will be able to change shape in static and dynamic media, opening up possibilities for dynamic typography.

Rainer Erich Scheichelbauer has written an step-by-step tutorial on how to use Glyphs to create variable fonts:
Learn how to make variable fonts using Glyphs

Color fonts

About color fonts

Color fonts merge layers into a single font file, and allows you to assign a color to each layer. There are various techniques and formats for color fonts, as each operating systems and brower has a preference. But for a variable color font, Microsoft’s CPAL/COLR system is required, as the other formats are incompatible with the interpolation. You can tweak each color layer, giving them the RGB value you would like and even assign alpha values. One of the most useful things is the ability for layers to overlay, allowing you to mask elements of the illustration/letter.

Rainer Erich Scheichelbauer has written an step-by-step tutorial on how to use Glyphs to create CPAL/COLR color fonts:
Learn how to make color fonts using Glyphs

Combining variable and color fonts

Combining variables and color

With your variable font transformed to CPAL/COLR layers, You can assign your variables to an axis (such as width, weight, or your own invention), and can add a value to these axis, allowing you to have control over each transformation, up to the decimal.

Now you just have to export it! Glyphs can’t export variable color fonts into webfonts, so you will have to export it as a normal variable font first, and afterwards convert it into a WOFF2 file. For this you can use one of the many online converters.

Variable color fonts on the web

Letting your browser do the moving

Only usable (currently) for the web, variable color fonts can be added to on your pages with just a few lines of css and a woff2 font file. Compared to SVG’s, variable color fonts allow little customisation, but are easier to implement. When loaded on your page as a variable font, you are able to animate the font, or use other input, such as browser size, microphone, camera or gyroscope to adjust the variables.

Want to animate variable fonts in your browser? The Etcetera Type Company has made an excellent tutorial:
Learn how to use CSS to animate your variable fonts

Want to find out how variable fonts can interact with your browser? Mandy Michael has made many great experiments and open codepens:
View examples & code on how to make your variable font interactive

Variable color font support

Variable color fonts and browsers

Not all browsers support variable color fonts in the same way: Some may render the characters incomplete, or create a pixelized preview. Currently Safari has the best support, keeping the visuals sharp while also allowing it to animate without errors. (other known browser errors include visual cut-offs or not loading the font’s color palette).

While color fonts and variable fonts are supported by program’s such as Adobe Illustrator and Photoshop, variable color fonts are not. These programs will only show a placeholder character when loaded. Although this character will be variable, the color table will be inactive.

Variable fonts trucks

What the future will bring

The tech is new, the adventure big! The surface of what’s possible hasn’t been scraped yet, so let’s continue this adventure together! Have a go with the asset pack, and hope this condensed writeup was of help! If you have questions, feel free to reach out by mail, or contact me on twitter.

For a look under the hood
Download the assets for my variable color present

And of course some thanks
I would have never been able to make headway into the world of Variable Color Fonts without the great tutorials by Rainer Erich Scheichelbauer.

And my Variable Color Fonts would never have seen any real use if it wasn’t for Mandy Michael’s cool experiments, which showcase variable fonts interacting with browsers, and other output/input.