In 2017, the graphic design community was shaken by a new technological and visual revolution. It turned many creatives’ dreams into realities, perhaps hurt some feelings, and even caused outrage. But there was no turning back. Guys, get ready for 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! ???? ????
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 Microsoft’s 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 starts supporting OpenType-SVG.
But you said there were great news?
Yes, we can actually leverage the previously existing color font formats and use them in many apps, especially 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.wt – a great resource for everything related to this exciting new technology.
Say hello to 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…
The Vibrant World of Color Fonts: Examples and Applications
As we delve deeper into the realm of color fonts, it’s essential to explore various examples and applications of this fantastic technology. From utilizing a color palette to crafting chromatic fonts, let’s take a closer look at how color fonts are revolutionizing the graphic design industry.
The Magic of a Color Palette
A well-thought-out color palette can be a game-changer when it comes to designing with color fonts. The right color combinations can evoke emotions and help you communicate your message effectively. For instance, a vibrant color palette can make your social media posts and banners stand out, while a more subdued palette can lend a sense of sophistication to your designs. Type designers now have the power to create fonts that come with a pre-built color palette, simplifying the design process and saving time.
Fallback and Compatibility
Although color fonts are making significant strides, not all devices and software support color fonts yet. To ensure that your typography remains legible even when color fonts aren’t supported, it’s essential to have a fallback option. Fallback fonts are standard vector glyphs displayed in place of the color font, ensuring that your text remains readable and functional.
Support for Color Fonts Across Platforms
Different operating systems and software have varying levels of support for color fonts. For instance, CSS now supports color fonts, enabling web designers to incorporate them into their website designs. Similarly, sans serif fonts with color variations can make your text more engaging and visually appealing. As more platforms embrace color fonts, we can expect to see a surge in their usage and popularity.
APIs and OpenType-SVG Fonts
APIs (Application Programming Interfaces) can be used to integrate color fonts into various apps and platforms, allowing designers to access and use color fonts across different software. OpenType-SVG fonts, which combine the capabilities of OpenType and SVG, have played a significant role in making color fonts more accessible and easy to work with.
Creating Chromatic Fonts
Chromatic fonts, which are essentially color fonts with multiple colors in a single glyph, open up a world of creative possibilities. With chromatic fonts, type designers can experiment with gradients, shadows, and textures, producing visually stunning and highly expressive typography. These fonts can be used across various applications such as posters, packaging, and website designs.
Templates and Integration
Color fonts can also be integrated into various templates, such as InDesign layouts. These templates can then be used to create stunning visuals for print and digital media. InDesign now supports OpenType-SVG fonts, allowing designers to work seamlessly with color fonts within their projects. Additionally, Android devices have also started supporting color fonts, making them accessible to a wider audience.
Expanding Your Social Media Presence with Color Fonts
Color fonts can play a pivotal role in enhancing your social media presence. By using eye-catching fonts that align with your brand’s color palette, you can create engaging content that stands out in the crowded social media landscape. Alternates, which are different versions of the same glyph, can help you customize your typography and add a personal touch to your designs.
Free Fonts
As the popularity of color font design continues to grow, several type designers have started offering free fonts for personal and commercial use. These free fonts serve as a great starting point for designers looking to experiment with color fonts in their projects. It also allows budding font designers to showcase their skills and contribute to the ever-growing world of font design.
Ok, I’m sold. Now how can I get started with color fonts?
Color fonts have opened up a world of creative possibilities for designers and typographers alike. With the growing support for color fonts across various platforms and operating systems, we can expect to see them become an integral part of the graphic design landscape. As more designers embrace the potential of color fonts, we will undoubtedly witness a surge in innovative and expressive typography that will captivate audiences and elevate the design world. So, get ready to jump on the color font bandwagon and explore the boundless opportunities it offers to enhance your creative projects and leave a lasting impression.
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.
Pin this for later!
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
We're a handful of makers, designers and geeks who are passionate about building the simplest & fastest font creation tools ever made on planet Earth...✊ So you can just focus on what you do best: be creative.
View More Posts
