This is a two-part blog post: you will first learn about this exciting new type technology and the creative possibilities it brings, and in Part 2 you’ll get more insights on how to leverage new tools to create and use your own color fonts.
Wait, I can already change a font’s color. What’s the big deal about color fonts?
Well, digital typography is currently based on vector font technologies that are color agnostic, meaning that a font contains vector shapes that have no color information, and by default, most apps will apply a black fill to the characters.
So whenever you want to add more personalization to your texts, you have to enter a manual and tedious process of setting colors, effects or textures, or even drawing your own creative lettering and composing your words letter by letter. This can be pretty lengthy, so when you need to replicate this process on large amounts of text or need last minute edits, well, you might just give up and skip creative colorful type.
Pretty sad, isn’t it? Now, look at some colorful lettering, like the Latinidad alphabet by Lucaz Matthias below, wouldn’t it be great if you could simply type text with it?
Now, some great news!
Over the past few years, clever people have been hacking around font technologies to bring color fonts to virtually every modern computer device on planet earth. Actually, billions of people are already using color fonts on a daily basis.
Wait, what? You just said that color fonts were a brand new thing!
Okay, so the short story is that all the emojis we are enjoying on our smartphones already ship as color fonts. We just didn’t notice because these fonts were embedded by default on our phones and computers. But as most of the big software and hardware players crafted their own set of emojis and color font technologies, it is currently mission impossible to use these color font formats across all devices and apps.
But in early 2016, most of the industry agreed on a single color font format: OpenType-SVG, which is simply adding SVG capabilities into the standard OpenType font format. So while SVG stands for Scalable Vector Graphics (thus cool things like vector letters that have any color, gradient, or transparency), OpenType-SVG also supports bitmap images, allowing any pixel-based lettering to be included in a proper font.
Yes, you read that right. Any. Image. Can. Now. Become. A. Letter.
WOOT! ? ?
So I can now make a font out of my vacation photos and use it everywhere?
On the creative side, yes, you can now go as wild as you want. Any vector or bitmap image can now be crammed into a color font.
On the technological side, nope, you can’t use color fonts everywhere… yet. But creatives can rejoice: in late 2016, Adobe added color font support in Photoshop CC 2017.
Now what about other apps? Firefox and the Edge browser are the first ones to support OpenType-SVG and other formats. It will take a while until every operating system, software manufacturer and browser maker start supporting OpenType-SVG, so we will still be limited by the incompatibilities between previous color font formats and a lack of OpenType-SVG support.
But you said there were great news?
Yes, we can actually leverage the previously existing color font formats and use them in many apps, specially on MacOS, where Apple’s own color bitmap font format (SBIX) is natively supported. So you can already install & use color bitmap fonts on MacOS and they will show up in any app that relies on Apple’s text rendering technologies, including Font Book, Pages, Keynote, Pixelmator, Sketch and more.
You can even embed such fonts in PDF files and print them from any Apple device (Windows supports its own color vector font format, COLR).
However, as of January 2017, Photoshop CC 2017 is the only app from Adobe that can display color fonts, along with emojis. This works on both Mac and PC.
Want more geeky stuff? ? Note that we can combine several color fonts formats into a single OpenType font file to ship fonts that are supported across many apps and systems (color fonts may also include standard vector glyphs to ensure retro-compatibility with incompatible apps). Sure, this all feels like some hacks, tricks that will not fit in every case, but they will help us start enjoying color fonts in many places until the technological transition has occurred.
For those of you who know about the web fonts history, just as it took several years to migrate from a myriad of web font formats toward a single WOFF file (ok, plus another WOFF2 file 😉 it will probably take a few years before we can count on a single OpenType-SVG file…
If you want to learn more about color fonts and their specificities, head to www.colorfonts.wtf – a great resource for everything related this exciting new technology.
Say hello the world’s first color fonts collection
In late 2016, our team at Fontself launched a Kickstarter-funded Photoshop add-on that brings font creation features to Adobe’s app, so any creative can start enjoying making their own fonts. We contacted a handful of creatives and started collaborating with them to kickstart the world’s first collection of color fonts – right here, on Creative Market.
These fonts have all been generated with Fontself Maker for Photoshop (they are actually color bitmap fonts) and include both OpenType-SVG and Apple’s SBIX color font formats, ensuring they will show up on many MacOS apps and Photoshop CC 2017.0.1 (on both Mac & PC).
Popsky by Igor Petrovic
Sundaze by James Daly
OneLine Bold by Roman Kaer
Golden by Alexei Popov
Watercolor by Anna Kozlenko
OldSchool Beveled by Alexei Popov
Watercolor by Andrei Zaripov
Latinidad by Lucaz Matthias
Want more color fonts? Check this Creative Market collection as more will follow!
And special thanks to all these creatives who accepted to embark on this journey – Lukas, Igor, James, Roman, Alexei, Anna & Andrei, you guys rock!!!
Do you (yes, YOU, the reader) have awesome color lettering or wanna join that color fonts collection? Then read on…
Ok, I’m sold. Now how can I make color fonts?
Great question. It will actually be covered in Part 2 of this article, coming soon. Stay tuned in the upcoming week for more insights on how you can use various tools to join the color font revolution. (And if you really can’t wait, get some clues on www.fontself.com 😉
Now, what do you think? Are you psyched about color fonts? Do you believe they are the next big thing in graphic design or just a fad? Please leave a comment below to fuel a passionate conversation.