OpenType SVG Color Fonts

What are OpenType SVG Color Fonts?

Did you say Color Fonts? No Way! Is it possible? What are they? How can I use them? So many questions.

Simply put, a color font is nothing else than a vector shape or bitmap image that now holds color information. How is this possible?

Traditional fonts only hold monochromatic color information. They contain either vector outlines or monochromatic bitmaps. These fonts do not embed any color information. They just represent filled shapes and spacing informations that are usually rendered as black text.

On the other hand, Color Fonts contain color information. They are often referred to as “multicolored fonts” or “chromatic fonts”.

Color Fonts can include multiple colors, shades or gradients, textures or even transparency. Color fonts don’t just contain vector shapes with colors, they can also be build out of bitmaps with textures or transparency. Sometimes both are combined, the vector shapes and bitmaps, which make them really artistic.


Standard Font

Monochromatic Font
 (Vector Shape)


Color Vector Font

Multicolored or
Chromatic Font
 (Vector Shape)


Color Bitmap Font

Color Bitmap Font
 (Bitmap Image)

What about Emojis?

Tons of us have already been using color fonts for years. We just never noticed or given it more thought. Emojis are Color Fonts and we have been using them on our phones, tablets and computers. Since the are embedded into the phone or computer, a cross usage is almost impossible since each provider crafted their own emojis. But here is good news!

 

OpenType-SVG

Since 2016, a standard single color font format as been agreed upon:
OpenType-SVG

OpenType-SVG is a font format where an OpenType font has its glyphs represented as SVG (scalable vector graphics) artwork. This format allows to display the font in multiple colors and gradients within a single glyph. Because of these features, these fonts are referred to as OpenType-SVG fonts or “Color Fonts”.

This font combines the standard font
 with gradients and colors to
create this colored effect in the font.
OpenType-SVG also supports bitmap images, therefore allowing any pixel-based image (lettering) to be included in the font.
So not only can we use vector shapes with colors, transparencies and gradients, we can also include images! Any image can become a letter and this makes it really interesting.
Once an image is included, it will become a color bitmap font, so we still have to be careful since scalability will still be an issue.
Bitmap Font with image
(created in Photoshop)

Using OpenType-SVG Color Fonts

To make it really simple, color fonts are really “just fonts”. You can install them, uninstall them, preview them and apply any color font to your text.

OpenType-SVG font use the fie extension .otf or .ttf. They are labeled as OpenType, but how can we know it’s an OpenType-SVG Color Font?  When you look at your installed fonts, you can see a tiny icon next to the font name, the OpenType-SVG icon:

e.g. in Adobe Illustrator in the Character Panel:

Check out this cool color font "Abelone" from Maria Grønlund

 

This icon will tell us that we are choosing am OpenType-SVG color font. Both, the vector based and the bitmap based color font will use this icon. So once the fonts are installed, they will appear just like typical fonts in your program’s font menus. It can happen that they won’t display to their full color potential since not all programs have adapted to color fonts. If the program lacks support, you’ll see just a plain black version of the glyphs.

Black version of the font 
glyph when program lacks support

Color font is displayed 
when program supports color fonts

 

Using OpenType-SVG Color Font in Your Print Designs

Adobe is ahead of the curve and is supporting the use of color fonts. Following versions will be able to use them: Illustrator (CC 2018), Photoshop (CC 2017), and InDesign (CC 2018).

Illustrator supports OpenType SVG Fonts such as Trajan Color and Emoji One Color. You can try them out if you are working with Illustrator (CC 2018). Same goes for Photoshop (CC 2017) and InDesign (CC 2018).

Since color fonts are pretty new to the market, be careful how you use them. From a design standpoint, they can add some “WOW”  to your designs, or they can turn it into a super busy design.

Use them for:

  • Headlines
  • Drop Caps
  • Typography Art
  • Highlighting a Word

Don’t use them for:

  • Busy Background
  • On Top of Images
  • With Tons of Other Fonts
  • Lots of Text

Using OpenType-SVG Color Font for the Web

If you are using color fonts for the web, you’ll have to keep in mind that browser support for color fonts is still evolving. At the moment support exists in Firefox and Microsoft Edge (IE). Hopefully other browsers will soon adapt to color fonts and add support. If the browser that lacks color font support, it will fall back to regular monochrome glyphs.

How to Install and Use Color Fonts

I created a small video tutorial on how to install and use color fonts in your designs.

Where Can You Get Color Font?

Artist and Designer have been busy creating some cool color fonts. Creative Market has a great collections of color fonts. Have a a look here and get color font happy 🙂

How to Make Your Own Color Fonts

I have been playing around with Fontself to create my own color fonts. I am still in the early stages, but as soon as I have working color fonts ready, I’ll post them here on vectortwist.com

In the meantime, checkout Fontself!

Fontself - Create your color fonts!

Add-on to create fonts in Illustrator or Photoshop (Mac & PC)
$49 (One-time purchase with free updates) 


www.fontself.com

 

*Color font used in featured image: Playbox by Matt Lyon


* Disclosure: This page contains links that are associated with affiliate marketing programs. I may receive a commission for any sales via these links, which in returns helps me to continue to offer free tutorials, tips & tricks for vectortwist.com.


 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.