I love seeing how thoughtfully designers use typography to add meaning to their projects. From greeting cards to posters to webpages, the popularity of using picture or color-filled glyphs (characters) for communicating is growing.
But, to achieve this effect has often required time-consuming and restrictive methods like importing each picture glyph as a separate object, or converting text into a path and manually adding multiple colors.
To free designers to use color and imagery in their type with ease, we are thrilled to now support OpenType Scalable Vector Graphic (OT-SVG) color fonts in Photoshop.
This is just one of the many exciting new features in the latest release of Photoshop (you can read about all of them here). In this post, I will dive into what OT-SVG color fonts are, how to use them in Photoshop, and what exciting possibilities they offer for the future.
What are OT-SVG Fonts?
OT-SVG fonts can support multiple colors and gradients in a single glyph, unlike conventional fonts that can only support one color in a single glyph. Photoshop supports both embedded PNG and vector (SVG) formats. The SVG format has the benefit of being able to scale to any size without becoming pixelated.
This format has already been adopted as the golden standard for color fonts by Adobe and several of our industry partners including Microsoft, Google, and Mozilla. We expect its momentum to continue as it is adopted by more platforms and font developers.
How to use them in Photoshop
We have pre-loaded two OT-SVG fonts for free in Photoshop CC 2017 for you to start designing with: Trajan Color Concept and EmojiOne.
Tip: Look for the OT-SVG symbol next to the font.
Trajan Color Concept
Trajan, a font designed by Carol Twombly, is famous for its use in movie titles and posters. As an internship project, Sérgio Martins colorized this typeface to produce Trajan Color Concept. The font contains 19 different color variations, plus two black and white options. You can browse through these variations and select them via the Glyphs Panel (Select Window > Glyphs in the file bar menu).
With over 90% of the online population using emojis to communicate, they have become an important part of our visual landscape. EmojiOne Color is an open source color font built by Adobe from the EmojiOne artwork designed by Denis Denz and produced by Rick Moby. The font contains various colorful and graphical characters, such as smileys, flags, street signs, animals, people, food, and landmarks. These are also browsed and selected via the Glyphs Panel.
OT-SVG fonts like EmojiOne let you create certain composite glyphs by adding the one or more glyphs in sequence as shown below.
Exciting possibilities with OT-SVG fonts
I cannot wait to see all of the amazing things the typography community will do with this format.
Third party plugins will let users create fonts from any set of images or shape layers, allowing the countless beautiful collections of picture glyphs that already exist to be downloaded and used in artwork as easily as conventional fonts.
Font developers will also be able to define editable colors within their fonts such that a designer could select specific colors within the glyphs and change them to fit her particular design aesthetic.
It’s just the beginning for OT-SVG color fonts, and it will all be at your fingertips in Photoshop.