Why Color Fonts Are The Next Big Thing in Typography

By on Feb 8, 2017 in Inspiration
Why Color Fonts Are The Next Big Thing in Typography

In 2017, the graphic design community is going to be shaken by a new technological and visual revolution. It will turn many creatives’ dreams into realities, perhaps hurt some feelings, and even cause outrage. But there is no turning back. Guys, get ready for color fonts!

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.

Pin It

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?

imgPin 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! 🎊 🎉

imgPin It

Like Vasty's Colorful Paper Craft Alphabet, many other 36 Days Of Type alphabets or creative lettering graphics can now be turned into usable font files.

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.

Color font support in Photoshop CC 2017Pin It

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.

imgPin It

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

imgPin It

Sundaze by James Daly

imgPin It

OneLine Bold by Roman Kaer

imgPin It

Golden by Alexei Popov

imgPin It

Watercolor by Anna Kozlenko

imgPin It

OldSchool Beveled by Alexei Popov

imgPin It

Watercolor by Andrei Zaripov

imgPin It

Latinidad by Lucaz Matthias

imgPin It

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.

Pin this for later!

Pin It

19 Comments

    • Staff

    YAY! Congrats, @Fontself Team and all of the awesome sellers who are turning over this next exciting chapter in type design. Can't wait to see the next post!

  1. Really fascinating concept! I'm most intrigued by the practical possibilities as seen in the watercolor, beveled examples as opposed to the all-out color fest fonts. I'll be quite excited to see the many possible iterations as they come out. And try them myself!

  2. Possibilities are endless @Paul Latino ! For instance, Sundaze by James Daly is actually a white font with shades: https://crmrkt.com/OEmaE so the funny thing is that you will only see the shades when you start using it on a white background - you really have to change the background color to see the whole font). #mindTwisting

    And you can also play with the opacity of the letters, or add textures. Heck, you could even do grayscale lettering with that color font technology ;)

    10 year ago, we built some prototypes to let us scan large scale stencil letters painted with airbrush: https://www.behance.net/gallery/30245329/FONTYOURSELF-(aka-the-very-first-Fontself-project)

    That's why we are now so excited to see what you guys will do when you start playing with color fonts! 😀

  3. This is so nice. I am looking forward to more options in the market. I'm specifically looking for a text effect that would look like dispersing dots around text. This would come in so handy for celebrations or invitations. I have tried different keywords, like dispersing text, pointillism letters, and many others. But have yet to find this. There was one set of text effects that i found. https://creativemarket.com/popskraft/257478-AI-CS5-graphic-styles-happy-Holidays I bought it but there are too many layers to actually use it practically. So I am still on the hunt. Seems like maybe it just has not been invented yet, but this color font discovery gives me hope :)

  4. Hey @Brandy Lipscomb it looks like you might need specific text effects behind the fonts rather than designs with embedded dots around the letters - as they would overlap the letters next to them. But for sure, there are so many directions that need to be explored now ;)

  5. @Jodi Van der Kruik i think it would be cool to have a group maybe on fb or somewhere. That way creators could see in real time what people are looking for. I have no idea really how to reach you all except for piggy backing on posts like this. :) Thanks @Fontself Team if the overlap was the same color as the letters, but did not obstruct the shape, that would be fine. Yes i think if i knew the exact terms to type into the search I would have a better chance to find (if it exists) what i am looking for. :)

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →