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 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. 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 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. 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 hoodDownload the assets for my variable color present And of course some thanksI 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…

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply