What Are Color Fonts? | How To
Color fonts are poised to take over the graphic design world in 2018, but what exactly are they, and how can you use them?
Here we’ll sift through the tech jargon and get to the simple truth of color fonts. This unashamedly in-your-face trend promises to put the fun back into typography. A must-know for web and graphic designers alike, this nifty new technology will have a transformative effect on digital and print design for years to come. So don’t get left behind, and read on!
Looking to learn how to make a color font? Check out our tutorial on How to Create a Color Font with Adobe Illustrator and Fontself.
What Exactly Are Color Fonts?
If you want to use highly detailed type on a design, you have to use a vector or raster image of a letter or group of letters. Whether created from scratch by typography artists or downloaded from a stock site, these images are time-consuming to make and don’t have the functionality or flexibility of a font file.
At least that was the case until now. Color fonts, sometimes referred to as chromatic fonts, represent the next evolutionary step for typography, incorporating details like color, gradients, and textures into a font file, in either vector or bitmap format. Vector details look clear and sharp however large they are scaled, while bitmap color fonts can look pixelated or blurry when scaled to a size greater than their intended maximum size.
Each color font is made up of a ‘fallback’ core, which is the standard OpenType vector font, plus additional data tagged on which is rendered in SVG (Scalable Vector Graphics) format. Amongst font developers, color fonts are referred to as OpenType-SVG fonts.
If you’re looking at the font on a browser which supports color fonts, you’ll be able to see the colorful version. If not, you’ll see the fallback version. This is important to make a mental note of, before you dive into converting all fonts on your website to color fonts. As color fonts are relatively new, most browser versions are currently unable to support the technology. Skip to ‘How Can I Use Them’, below, to find out more.
Hmm, So Why Would I Want to Use Them?
Remember the thrill of using WordArt to embellish your PowerPoint presentations back at school? While your teacher may have been less thrilled, there’s just something downright fun about adding a maximalist flourish to text. Color fonts are basically like WordArt for the internet age, adding extra oomph to any design.
This isn’t a trend that minimalist fans will wholeheartedly embrace, but it’s certainly refreshing after decades of clean, Swiss School-inspired design. Color fonts sit at the opposite end of the spectrum to Scandi cleanliness, instead taking their cues from emojis, retro type styles, and app design.
Color fonts tread a shaky line between good and bad taste, but somehow they feel exactly spot on for right now. They’re making their appearance alongside a revival for all things retro in design, as well as a new maximalist mood across all design fields, from fashion to interiors. Color fonts don’t take themselves too seriously and are instantly engaging, and that’s what makes them particularly attractive to designers and marketers looking to entice the fickle, tech-obsessed millennial market.
Above all, color fonts are fun! While early color fonts have been designed with websites and apps primarily in mind, they also have the potential to offer something youthful and fresh to print design too. You can’t use a color font without cracking a smile, which is perhaps what designers and consumers are craving in these politically and socially uncertain times.
OK, So Where Can I Use Them?
Because color fonts are such a new technology, many browsers, devices and software programs are yet to catch up. You might not be able to view color fonts on some browsers—you’ll only be able to view the standard OpenType version instead.
However, this is likely to change very soon. OpenType-SVG fonts have been declared an industry standard for color fonts, which means that browsers and software will probably update rapidly to facilitate them. You can currently view color fonts on more recent versions of Firefox (from version 26) and Microsoft Edge (from version 38 on Windows 10).
As for using color fonts on design software, Adobe is ahead of the curve, with designers able to view and apply color fonts using the newest incarnations of Illustrator (CC 2018), Photoshop (CC 2017), and InDesign (CC 2018).
Some type designers are also experimenting with animated versions of color fonts. Gilbert, a color font created by Fontself, is usable in Adobe After Effects.
These animated styles represent an exciting new development for more accessible animation—expect to see them everywhere across social media, GIFs and videos very soon.
Where Can I Find Color Fonts?
Color fonts are few and far between at the moment, but more are being released all the time as the trend gains traction. Adobe has a dedicated color font Typekit, where it details the newest color fonts available for download for web and print. One of its most notable launches is the color font version of Emoji One, which makes integrating colorful emoji graphics into your designs super easy with the Glyphs panel to hand.
Some font designers use a dedicated platform to launch their color font creations. Bixa Color is a retro-inspired collaborative effort by NovoTypo and Roel Nieskens.
Bungee, designed by David Jonathan Ross, is available in a staggering range of colors and styles, as well as horizontal and vertical versions.
Want to have a go at creating your own color font? Fontself is the color font designer’s go-to tool. Take a look at the dedicated page for Gilbert, which was created using Fontself, to source some inspiration on the possibilities.
I’m a Color Font Convert! But How Should I Use Them?
If you’ve been bitten by the color font bug, it can be tempting to throw out all your old fonts and go a bit crazy. Before you create designs which resemble a bad acid trip, take into consideration these tips and pointers for making the most of this new typography trend.
As with standard fonts, some are notably better than others. Just because you can use a color font doesn’t mean you necessarily should. Hold out for a few months and you’ll have access to a much broader selection of color fonts, helping you create more thoughtfully crafted designs.
Be mindful of the limitations of color fonts. If you have your heart set on a bitmap font, it’s advisable not to use this at a larger scale than was intended by the font designer. So, for example, a bitmap color font might look great on a printed flyer set to the right size, but it might look much less polished on a responsive web design that involves scaling content to a large size on desktops.
It’s also worth keeping in mind that color fonts are heavier than their OpenType relatives, due to the extra amount of data they carry. They aren’t always huge (for example, the Bixa Color font carries an extra 30kB on top of the regular font file size), but it can affect the loading time of websites and apps. By all means use your color fonts with abandon, but don’t allow liberal use to affect the user’s experience of your design.
If you want to use color fonts for web design, you should also take into account the possibility that it may be a long time before most visitors will be able to view the fonts as you intended. It may be many months or years before individuals choose to update or switch browsers, and most will not be aware of the pressing need to do this in relation to color font viewing. With this in mind, you need to make sure that your font looks as good in its ‘fallback’ format as it does in color.
Because color fonts are overtly loud and garish, they can push a design into distasteful territory. For some designs, particularly apps aimed at a younger market, this can be a bonus! Adobe’s color font Typekit page instantly provokes that love-it-or-hate-it reaction to excessive web design. Other designers might prefer to balance a color font with more pared-back type or black-and-white images on the rest of the layout, or use a color font as the sole focus of an otherwise clean and simple design.
If you’re still unsure about how to use color fonts in your designs, it’s a good tip to remind yourself of the purpose of your design. Are you looking to target a market which is hyper trend-aware, like tech-savvy millennials? Then using color fonts freely will result in an engaging and youthful design. Do you simply want to use color fonts to add a point of difference to your design? Using them sparingly will give you a more professional and polished result.
Conclusion
Color fonts may be the latest ‘it’ trend in graphic design, but it looks as if they’re here to stay, for the foreseeable future at least. They represent a break with conventional font technology, making more detailed type, and even animated text, much more accessible for designers and non-designers alike.
With color fonts still in their infancy, there is a limited range of fonts available for download, which makes their current use for designers a little limited. However, this is an exciting time for budding font designers. If you’re looking for a new type challenge, creating your own color font from scratch could be both creatively and financially rewarding.
Want to dip a toe into type design? These tutorials will guide you through the basics of creating your own fonts from scratch:
In this article, we’ll be talking about fonts! Have you ever tried making one? Even if you haven’t ever thought about this, you might get inspired after…
If you’re a designer or illustrator who’s more comfortable creating glyphs in Adobe Illustrator, this tutorial is right up your alley! We’ll plan out our…
This tutorial is the second part of our simple font creation in Adobe Illustrator project! In this tutorial we’ll explore two fantastic methods of creating a…
Ever wanted to give your digital layouts and designs a truly personal touch? In this tutorial we’ll look at how you can create a font from your own…
Creating fonts has never been so easy as with Fontself—a powerful extension for Adobe Illustrator and Photoshop. Learn how to make color fonts with Fontself!
