This article appears in Issue 22 of CreativePro Magazine.
While color fonts aren’t new in the design world, there is still much room for their creative growth and use in digital and print designs. Plus, colors are fun, and what better way to celebrate Pride month than by adding a little more support, equality, and color to our lives? Let’s take a look at what color fonts are, examples of color fonts, and why you might want to try them out.
The Emergence of OpenType-SVG Color Fonts
Longtime font fanatics might be familiar with Trajan Color, an open-type SVG font by Adobe, initially made available through Adobe Photoshop CC 2017 (support for Illustrator and InDesign followed shortly after).
Color fonts are generally stored as SVG data inside OpenType font files, commonly referred to as OpenType-SVG fonts. Color fonts, sometimes called chromatic fonts, are still evolving, with support gradually being offered through more web browsers such as Chrome, Firefox, Edge, and Safari as well as CSS. Applications like Affinity Designer, Adobe Express, Illustrator, Photoshop, InDesign, and Microsoft Office also support color fonts.
Gilbert and Gilbert Animated
One of the first color fonts to garner widespread attention is Gilbert by Hayato Yamasaki, Kazunori Shiina, and Robyn Makinson.
Those folks partnered with NewFest and NYC Pride to create a font in honor of Gilbert Baker, LGBQT activist, artist, and designer of the iconic Rainbow Flag. Gilbert is available through Adobe Fonts with a Adobe Creative Cloud subscription, and Type With Pride. Both platforms also offer a standard Open Type version of Gilbert as well, so make sure to add this free font to your type collection.
If the world of motion is your happy place, don’t miss out on Gilbert Animated. This beautiful color font is also available as a free download through Animography for use in After Effects and React (JavaScript XML-based projects).
Color Fonts and Adobe Fonts
In addition to Gilbert, Creative Cloud Subscriptions include Utopian, the aforementioned Trajan Color, Tipoteca, EmojiOne Color.
Utopian color font
Tipoteca color font
If you want to learn more about using color fonts in your designs, watch Episode 22 of The Adobe Fonts Show, where the Adobe Fonts team and Ulrike Rausch cover the basics of using color fonts.
Color Fonts for Everyone!
I look forward to the day when the use of color fonts is commonplace. But until that day comes, these are some of the fonts I will be drooling over:
- Bixa Color offers free OTF and WOFF versions for non-commercial work, or buy the full Bixa Color for commercial use!
- Abelone Color designed by Maria Grønlund –additional color fonts from Fontself Color Week 2017 in this link!
- Google Color Fonts (My eyes are on you, Bungee Spice!)
- Geometric Font created by Monika Gause
- Envato Elements Color Fonts a subscription-based service with some awe-inspiring color fonts
- Creative Market Color Fonts made with FontSelf and available for purchase
Making Your Own Color Fonts
If you want to try your hand at making your own color fonts, you must check out FontSelf, a magical font-making plug-in available for Illustrator and Photoshop. Many of the fonts on the list above were created using Fontself. To get a sense of how it works, check out this post by Steve Caplin, wherein he describes the process of making a unique typewriter font with FontSelf. And here’s a great tutorial by Monika Gause on how making a color font with FontSelf.
iPad users can also download Font Maker – Fontself for fast and easy font-making!
Reasons to Use Color Fonts
If I haven’t convinced you yet, consider these scenarios, where color fonts might be just what you (design) doctor ordered:
- You have a project that needs to be created in Microsoft Office and want to add some colorful yet subtle highlights (Word, Excel, and PowerPoint).
- Your creative brief is limited, but a little color can be added for some flair.
- You need a quick and effective yet colorful social media post.
- You love all things colorful!
Whatever reason you might find yourself integrating color fonts into your creative workflow, I wish you a happy, safe, colorful, and creativity-filled Pride month, Amazing Humans!
This article was last modified on January 2, 2024
This article was first published on June 27, 2023
Commenting is easier and faster when you're logged in!
Leave a Reply
The problem with OpenType SVG fonts is the extreme lack of support of these fonts in applications. Although Adobe supports these fonts in InDesign, Illustrator, and Photoshop, forget about any of the Microsoft Office applications, Windows, MacOS, Google applications, and browsers based upon Chrome (including Microsoft Edge).
This is very unfortunate since OpenType SVG fonts that are based on vector elements (as opposed to shoving resolution-dependent raster images inside an SVG definition) yield exceptionally high quality both for screen and print and losslessly scale. Also, applications that know what they are doing can readily embed OpenType SVG fonts into PDF files as OpenType Type 3 fonts that maintain the OpenType SVG quality.
Too bad inter-company politics have gotten in the way of this technology!
– Dov Isaacs
I agree Dov. I do hope that this part of technology continues to evolve and strengthen. Life is always better with a little more color! Thank you for reading and for your exemplary wisdom!
Great article! Very informative and helpful. And colorful! :)
Thank you so much Chad! :)