Color Fonts: A Beginner’s Guide
So what in the heck is a color font? It’s a term that keeps popping up and is starting to gain traction, although use in large design projects is still in its infancy.
Vendors such as Adobe’s Typekit have started to release some color font options with browser support, so there’s some movement toward wider use. Some have even called color fonts “the next big thing in web design.”
Here, we’ll look at the trend and let you decide how big – or not – this concept will be.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
What is a Color Font?
Color fonts are almost exactly what they sound like. Typefaces that include multiple colors, shades or gradients, textures or transparency. These funky options are not just adding color to lettering, they are specific typefaces with all the detailing included.
Color fonts can include vector shapes, bitmap images or both in the font files, which can make these typefaces heavier than standard font packages. Common examples of color fonts include an emoji typeface or letter that contains icons within. Single-color fonts in this style are often called chromatic fonts, because they only contain one hue or gray.
This biggest issue with color fonts right now is that there’s no true standard format. And there’s a catch with all those file formats – vector and SVG images can be scaled with ease, but the bitmap versions could potentially have size limitations.
There are actually five formats to deal with:
- SBIX (Apple): Bitmap version with native support on Mac and iOS systems
- CBDT (Google): Bitmap version with native support on Android systems
- COLR (Microsoft): Vector version with native support on Windows 8.1+ systems
- SVG (W3C): Vector and bitmap versions
- OpenType SVG (Adobe/Mozilla): Vector and bitmap versions that puts SVG shapes in OpenType fonts
On the other hand, major players are starting to adopt guidelines for usage. Mozilla (the backbone of web browser Firefox) and Adobe have agreed that OpenType SVG is the preferred format; others are still in flux as they come to a decision.
If you want to get into the nitty gritty of how these fonts work and all of the file format specifications, Fontself has a pretty good primer.
How Do You Use Color Fonts?
One of two thoughts happen when you first see a color font:
- Wow, that’s hideous!
- Cool! I know exactly how to use that!
No matter which camp you are in, there are applications that are perfectly suitable for color fonts. But you need to use them within reason. (Color fonts are for the most sparing of sparingly uses.)
Try a color font:
- For an attention-grabbing technique for a short word
- For an icon or logo-style element
- For a drop cap to start a long block of text
- For a bold headline treatment in an otherwise minimal style design
- To bring focus to a specific word or words in a large block of text
- When the rest of the design is simple
- When typography will be your primary art element
- When the project demands something fun and unusual to grab user attention
- With images or on top of images
- With busy backgrounds
- For a lot of text
- With lots of other design techniques, such as animation or motion; the color alone is usually enough to create visual impact
- With other novelty or specialty typefaces
- Adoption and compatibility with browsers for web design projects (right now more color font design are actually appearing in print because of compatibility concerns)
- Overall style techniques and whether more ornate and colorful design techniques are trending overall
- Fontself is an Adobe Illustrator or Photoshop add-on that helps you create custom color fonts
- You can draw and design everything from scratch with this tutorial from Glyphs
- FontLab has a video tutorial that walks through the process step-by-step
How To Not Use Color Fonts
There are more ways not to use color fonts than you can probably count. You don’t want to revert as website design back to some of the flashing, blinking, overwhelming color craziness of the 1990s.
Don’t use a color font:
An Evolving Trend
The color font trend is starting to gain traction from some major players in typography. The OpenType SVG format adopted by Adobe and Mozilla might be the tool and format that helps this trend really take off. Adobe even recently added color fonts to Photoshop (you might have noticed some emojis in the character palette).
Here’s how Adobe explains OpenType SVG:
“OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as ‘color fonts.’
“OpenType-SVG fonts allow text to be shown with these graphic qualities, while still allowing it to be edited, indexed, or searched. They may also contain OpenType features that allow glyph substitution or alternate glyph styles.
“Color fonts like Trajan Color Concept and EmojiOne Color will appear just like typical fonts in your programs’ font menus — but they may not display their full potential, since many programs don’t yet have full support for the color components. If your software program doesn’t support the SVG artwork within the fonts, glyphs will fall back to a solid black style. Color can still be applied to this fallback style, as it will work like a typical OpenType font.”
Further, The State of Web Type has a section dedicated to updating browser support for color fonts so you can determine when the time is right for you to take the plunge.
In terms of the evolution of color fonts and adoption of usage, two things will play a major role:
Try a Color Font
If color fonts are your thing, you can either download a color font to get started or create your own, depending on the type of design project.
Create Your Own
The type of color font you create really hinges on your software skills. A color font might include anything from imagery from your favorite photos to beautiful bubbles and strokes in gradient colors. You can do it completely on your own or use a tool to help design a custom color font.
Download or Embed
There are some pretty cool color fonts out there that are screaming for you to use them in a project today. Here are a few to jumpstart your color font creative flow (plus links to the other color fonts used above):
Conclusion
Are you ready to jump on the color font trend? Is it too much or is the spotty support a real issue for your projects?
Personally, I find this trend to be a lot of fun and have real practical use in print projects such as event posters or flyers. I’m still not quite convinced when it comes to website projects though. Time will only tell if this trend really does become “the next big thing in web design” or another fleeting fad.