Wednesday February 28th, 2018

Color fonts. The future of typography is here

The world of digital typography is welcoming a new concept that opens a whole world of possibilities for web design.

Color fonts include colors, shadows, gradients, textures or transparencies. The magic is that they also allow the text to be edited, indexed or searched.


Gilbert font

The world of digital typography is welcoming a new concept that opens a whole world of possibilities for web design.

Color fonts include colors, shadows, gradients, textures or transparencies. The magic is that they also allow the text to be edited, indexed or searched.

Gilbert font
Gilbert font

The biggest problem with the color fonts, at this time, is that there is no standard format due to the novelty.

There are five color fonts formats:

  • 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 put SVG shapes in OpenType fonts
abelone-maria-gronlund
Abelone created by Maria Gronlund
aires-yai-salinas
Aires created by Yai Salinas

The main participants in this typographic revolution are beginning to unify guidelines for their use, so Mozilla and Adobe have agreed that OpenType SVG is the preferred format.

The OpenType SVG is a font format in which all or some of the glyphs of a typeface are represented as SVG illustrations, that is, vector graphics.

The best example of OpenType SVG typography is Gilbert typography, created by Ogilvy & Mather and Fontself, which they carried out together with NewFest and NYC Pride to honor Gilbert Baker, artist and creator of the LGBT flag in 1978.

Gillbert font
Gillbert font

The OpenType SVG format could be the format that helps this trend really take off. Adobe recently added color fonts to Photoshop.

Color fonts begin to gain weight in the world of design and although its use is still somewhat limited, many experts already consider them as one of the greatest contributions to the world of recent web design.

If you want to know more about how these fonts work and all the specifications of this new file format, Fontself has a good base. Fontself is an extension for Photoshop and Illustrator that lets you turn any lettering project into an Opentype typography in minutes.

Tags: ,