Improvements in OpenType font technology means that type designers can now attach huge quantities of data to single font files. This means that adjusting the appearance of your fonts, from simple factors such as width and weight to more novel adjustments like adding color, 3D elements or animation, are now much easier to achieve.
Here we’ll take a look at two types of new font technology—Color Fonts and Variable Fonts—which promise to revolutionize the way designers practice typography. But are they a fleeting gimmick, or have staying power for the future? Read on to discover our verdict.
Color Fonts: Bringing the Fun Back into Typography
Imagine you could transform your text instantly from lackluster monochrome to a rainbow palette of color, as well as incorporate gradients and shadowing to create a 3D effect. Instead of spending hours laboring over creating a bespoke vector illustration, color fonts allow you to achieve this at just the click of a mouse.
Color Fonts (sometimes called Chromatic Fonts) incorporate details like color, gradients, and textures into a font file, in either vector or bitmap format.
‘Geometric’ Color Font designed by Monika Gause
A color font file is made up of a core OpenType vector font, with additional data added to this which is in SVG (Scalable Vector Graphics) format. The technical name for this file format is OpenType-SVG fonts.
Color fonts have been designed with the web in mind, rather than print, though you can use them for both. As color font technology is still in its infancy, not all browsers are able to support them. So if you’re viewing a website which uses them on a browser which supports color fonts, you’ll see the full version. If not, you’ll only be able to see the stripped-back OpenType version.
Color fonts might not be to everyone’s taste. Typographers with a refined taste for clean sans serifs will probably find them a bit too garish and edging towards ‘bad taste’ design. But with the current mood in graphic design swinging towards all things maximalist and optimistic, they represent a welcome breath of fresh air.
‘America’ color font designed by Kuznetsova Ksenya
OK, So How Do I Use Color Fonts?
Even though some browsers are as of yet still unable to support color fonts, the OpenType-SVG format has been listed as an industry standard. This means that browsers will be updated quickly to be able to host them. At the time of going to press, you can view color fonts on recent versions of Firefox (from version 26 onwards) and Microsoft Edge (from version 38 on Windows 10). Designers can also use color fonts in recent CC versions of Adobe software, including Illustrator CC 2018, Photoshop CC 2017 and InDesign CC 2018.
Where Can I Download Color Fonts?
More color fonts are being designed and released all the time, with many being offered as free beta or full versions, so it’s always worth browsing the web to see what’s new. Typekit is Adobe’s dedicated color font site, where you’ll find a list of the latest color fonts available for download. Some type designers and foundries set up their own independent sites to launch new color fonts. These are well worth seeking out, as these are often used as platforms for giving away free versions of fonts before the font is offered for sale more widely. Check out NovoTypo’s Bixacolor or David Jonathan Ross’ Bungee, for example.
Bixa Color by NovoTypo
If the style you have in mind isn’t available yet why not take the plunge and have a go at creating your own color font? Fontself Maker is an extension for Photoshop and Illustrator CC that allows you to design your own OpenType-SVG fonts.
Fontself Maker
Color fonts aren’t restricted to plain old static versions either, with more designs being released that include animated elements. Gilbert, a color font created using Fontself, can be used in After Effects.
Variable Fonts: The Flexible Font Technology
There’s a good reason why some designers devote themselves exclusively to the pursuit of tweaking kerning, leading and weight — formatting type can be a time-consuming process. Variable fonts might mean typographers have a lot of extra time on their hands, as these fonts allow designers to tweak all sorts of formatting details instantly, simply by adjusting a slider.
A variable font is an OpenType font format, but it also includes a new technology called OpenType Font Variations. Compared to standard OpenType fonts, variable font files contain a huge amount of extra data, with up to 64,000 axes of variation. These variants include differences in the weight, width, slant (italicization), as well as other factors like the style (e.g. Light, Condensed), of the font.
‘Merit Badge’ variable font designed by David Jonathan Ross
Variable font technology was collectively developed by Google, Apple, Microsoft, and Adobe, and was designed with responsive web design in mind. As with color fonts, the fact that variable fonts were developed with online design in mind means that they are of less use to print designers. However, this might change as a wider range of variable fonts become available.
The main advantage of variable fonts is that they offer much more flexibility in the way that designers format type. By subtly and quickly changing details like the width or weight of text, it’s possible to experiment with a wide range of formatting options in a very short amount of time. It also works as a handy method for banishing stray widows and orphans in your typography, as an alternative to time-consuming tracking and kerning adjustments.
How Do I Find and Use Variable Fonts?
Variable fonts have been around for a couple of years, but there’s still a relatively limited range of variable fonts on the market. For most designers the first point of access to the technology is in Adobe CC, with a small range of pre-installed variable fonts available in Illustrator and Photoshop:
Source Sans Variable
Source Serif Variable
Source Code Variable
Acumin Variable Concept
Minion Variable Concept
Myriad Variable Concept
In Illustrator, variable fonts are super simple to use. You’ll find them in the standard font list in the Character panel (Window > Type > Character). Click on the double-T symbol to the right of the font weight menu. When you hover over the symbol you’ll see ‘Variable Font’ appear next to your cursor.
Clicking on this opens a pop-out window, with sliders to adjust three options — Weight, Width and Slant.
If Illustrator’s current variable font offering leaves you wanting more, you can track down more independently-designed variable fonts on v-fonts. Many of these are also offered as free downloads while they are in beta production.
V-fonts
Color Fonts and Variable Fonts: Fad or Revolution?
Traditional typographers might not be as enthusiastic about the development of color font and variable font technology as web designers. But does that mean these new fonts are destined to be a passing trend? With font technology leaning towards providing more flexibility to designers, it seems inevitable that the adaptability of these new OpenType fonts will start to open up more possibilities for type design and prompt further developments within this field.
Keep an eye out for more offerings from type foundries and independent designers as this trend gains traction. Our verdict is that these new flexible font technologies aren’t going away anytime soon, and will only evolve with time.
Want an opportunity to brush up on your typography? Get a crash course on type anatomy right here on the 123RF blog. If you’re looking to create some font effects, try our 3D retro text effect tutorial.