‘Variable colour font’ is a term which comprises of two relatively new technologies: colour fonts and variable fonts. And, as niche as they may sound, variable colour fonts are actually quite fun — and hold a whole lot of potential!

To begin, let’s look at the two technologies in more detail.

Unsurprisingly, a ‘colour font’ is simply a font that comes in colour. To be precise, it’s a font file that includes characteristics like colour, gradients and textures; creating multicoloured letters from the outset. The technology is aimed at the web, not print, although not all browsers support them yet. Adobe’s page on colour fonts shows some examples of colour fonts, intentionally poking fun at their loudness and potential for garishness.

‘Trajan Color Concept’ is part of Adobe’s Type Concept programme

‘Trajan Color Concept’ is part of Adobe’s Type Concept programme

‘Variable fonts’ are a bit more complicated; it’s a file format which allows you to store variations of a font in a single file, rather than multiple files. So, instead of having separate files for Helvetica Regular, Helvetica Bold etc., you only need one single file; resulting in faster load times for your website. This single file includes one or more masters, which are extremes on either end of the font-weight spectrum, for example. Through interpolation, the middle states between these extremes can be calculated, allowing for a large number of intermediate font weights. So, a variable font is a single font that behaves like multiple fonts; resulting in a font that, to stick with the example, can transition smoothly between Helvetica Thin and Helvetica ExtraBold.

Compared to regular font files (left), variable fonts (right) require just one file, while also allowing for more granular adjustments

Compared to regular font files (left), variable fonts (right) require just one file, while also allowing for more granular adjustments

The second thing to know about variable fonts is that the kinds of variations you can achieve are practically endless. All you need to do is define one or more axes along which you want your font to be modified. So, additionally to font-weight, you could have an axis called ‘serifyness’, along which your font can transition smoothly from sans-serif to serif. For more examples, see CSS Tricks' round-up of variable fonts experiments.

A gif showing recursive designs variable font

Recursive.Design’s variable font has five axes; monospace, casual, weight, slant and italic.

As I mentioned before, the term ‘variable colour font’ is a combination of these two technologies: it’s a coloured font which can be modified along pre-defined axes.

Moving away from letterforms for a bit, we could imagine doing this exact thing but with illustrations. As an example, the image of a plant takes the space of the letter A and its axis is growth, allowing it to morph from a sprouting seed to a full-grown house plant. Check out Arthur Reinders Folmer’s variable colour font experiments to see similar examples.

an example of an illustration that uses variable colour fonts

In this example, an illustration of a plant takes the place of a letterform, with a ‘growth’ axis modifying its age

Variable colour fonts are still in their early stages, and most examples out there will be fun and experimental, but not really fit for use.

However, that doesn’t mean there aren’t real opportunities for variable colour fonts to have a positive impact on user experience. For example, by using a variable colour font, your website’s icons and illustrations could decrease and increase in size and level of detail according to screen size. Another idea would be to couple a variable colour font’s contrast axis to light conditions so that your website’s text increases in contrast when viewed in direct sunlight. Perhaps you could even override existing designs which are too low in contrast to be accessible.
Moving away from websites, you could create subtitles for a film, which transform and animate according to what tone is spoken in (angry, sarcastic, scared, etc.). They could even change colour and style to compliment the scene in such a way that the subtitles seem like less of an afterthought and more as part of the film itself, thus improving the experience for those that are deaf or hard of hearing.

Personalisation is a huge topic these days, so it only makes sense to introduce typography to this world — and variable (colour) fonts are the way to go, as they can respond to the user’s needs and environment. Of course, being still a relatively new technology, their full potential has yet to be explored. However, I think it’s fair to say that they offer exciting opportunities to, not only, add some spice to a website, but also to improve the user experience.

Further Reading

Variable Fonts

https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369

http://www.alphabettes.org/responsive-variable-fonts/

Colour Fonts

https://design.tutsplus.com/articles/the-beginners-guide-to-color-fonts--cms-29861

Variable Colour Fonts

https://www.typearture.com/howdotheywork/

https://blog.123rf.com/color-fonts-trend/

Our team of UX Designers have worked on projects across the world from Hawaii to Sydney making websites more user-friendly. If you are interested in knowing a little more about our UX Design services, then please do get in touch.

Contact Us