Stacking multiple fonts on top of each other is a makeshift solution for creating multicolored text in digital media. I was well aware of this when I designed Rocher. On the other hand, I so excited about it I couldn’t keep myself from releasing it even knowing the user experience would be subpar.
Things have been changing rapidly since then. Support for color fonts has seen a considerable increase in the last couple of years. On top of that, variable fonts technology has opened up another plethora of possibilities. Merit Badge, by David Jonathan Ross, was the typeface that inspired me to go into this rabbit hole and release Rocher Color. This is its story.
All the paths I didn’t take
I first considered making real color fonts out of Rocher shortly after releasing it in April 2017. I didn’t know much about this technology back then, so throughout that year I’ve researched the four formats of color fonts: CBDT/CBLC, sbix, SVG and COLR/CPAL.
From the start I wasn’t much inclined to make CBDT/CBLC or sbix fonts. These formats basically store PNG files for each glyph and are mainly used for emoji. This means large file sizes and a single fixed color palette per font. Not really what I had in mind.
I then redirected my attention to SVG color fonts. Not to be confused with the deprecated SVG fonts, OpenType-SVG is font format that packs SVG files for all or some of its glyphs in a regular OpenType font. This is the direction Adobe has taken, and I was really excited about having a color version of Rocher working on their apps. I then proceeded to spend a considerable amount of time into this only to abandon it later. To be honest, I already had 13 working OpenType-SVG fonts when I ditched it. I’m confident I made the right decision, though.
OpenType-SVG fonts are very powerful: gradients, animations, mixing vector and bitmaps are some of their best features. However, all that power comes with its caveats. OpenType-SVG fonts require embedding an SVG file for each one of its glyphs. This means huge file sizes. To give you an idea, Rocher-Regular.otf is 64KB, while an SVG version of Rocher with the same character set is at least 872KB, depending on the color palette.
Adding insult to injury, SVG fonts cannot be easily subsetted. This means you’d be stuck with all the glyphs you don’t need when using it on the web and with no way of shrinking it down.
COLR/CPAL, meet variable fonts
Before going all in on SVG, I remember having a good feeling about COLR/CPAL fonts. These fonts work pretty much like your regular OpenType fonts but with additional “layers” for each glyph plus information on color palettes. A color font of this format can have 1, 20 or 50 color palettes with very little difference in file size. In theory, you’d also be able to create custom color palettes directly in you graphics software, but no app has an interface for this yet.
What took me back at the time was its limited software support. This format was introduced by Microsoft (they use it for the emoji on Windows), but no other software giant seemed to be interested in its elegance. Only after seeing David Jonathan Ross’ Merit Badge I really understood their potential. As they are regular OpenType fonts with a couple of additional tables, making them variable is much easier.
Development phase
I soon found out converting 400+ glyphs into a variable color font format is no trivial task. To keep my sanity, I divided this process into four general steps: preparing the bevel layer, preparing the shadow layer, exporting variable fonts, and merging them all together into a single variable color font.
Preparing the bevel layer was probably easier than I anticipated. I already had it as a static layer, all I needed was to make it interpolate between two stages. To do that, I wrote a little script which basically flattens a path in itself. The script is really not really flexible for other projects, but I plan to improve that in the future.
The second step was the hardest one for me. I wanted to make the shadow layer interpolate with the outline one, so I set out to write a “block shadow” script. That script would add points at a specific angle and move half the path by a specific distance. After weeks of questioning my coding skills, I finally reached a working version.
With my layers ready, I exported each one of them as a variable font (regular B&W ones). I then had to pry them open using TTX and study their contents looking for data to be merged. I had never done anything like it before, so I spend quite a long time reading TTX files to understand how an OpenType file should be structured. After I few tries, I had a working proof of concept that could be automated using python scripts once more.
The multiple variable fonts were then merged together with another python script (this time using the fonttools module). Documentation is quite scarce, which meant a lot of trial and error on my part. In the end, I successfully managed to automate the creation of variable color fonts by merging/updating the name, glyf, gvar, fvar, hmtx and STAT tables.
Software support
All major browsers support some sort of variable color fonts:
- The latest versions of Microsoft Edge and Mozilla Firefox render them just fine.
- On Windows 10, current versions of Google Chrome and other Chromium-based browsers (Opera, Vivaldi, etc) do not render color. Support is coming with Chrome 71 (scheduled to be released in December 2018). And in case you’re wondering, this font will never work in Internet Explorer.
- On MacOS High Sierra, there is a bug with some accented characters which makes the bevel layer misaligned depending on the variation value. Other than that, it works with both color and variations in Safari, Chrome, Opera, etc.
Moving away from browsers, support in MacOS High Sierra is pretty good. We still don’t have an interface for manually adjusting each variation nor a way to select a color palette, but it is usable in Pages, Numbers, Keynote, TextEdit, etc. Even Microsoft Word for Mac 16.16 has basic support for color fonts (no variations, though).
On the other hand, Adobe apps ignore the COLR/CPAL tables and will render all glyphs as their B&W counterparts. If you want to use it in Photoshop, Illustrator or InDesign, you’re stuck with the regular version of Rocher for now.
Using a variable color font
Rocher Color features two axes: bevel (bvel) and shadow (shdw). Both of them accept values from 0 to 100. They will show up on Adobe apps, however they only affect the color layers.
To select a specific variation of Rocher Color on the web all you need to do is to add the font-variation-setttings CSS property to your selector:
@font-face {
font-family: 'RocherColor';
src: url('../path/on/your/server/RocherColorGX.woff2') format('woff2'),
url('../path/on/your/server/RocherColorGX.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: RocherColor;
font-weight: normal;
font-variation-settings: "BVEL" 50, "SHDW" 100;
}Being able to provide multiple color palettes is a nice benefit of the COLR/CPAL format, even though there’s no way of accessing them yet. This will change when the CSS font-palette property gets adopted by the browsers in the future. For the time being, you can choose your colors and download a custom version directly on the Rocher Color page.
Download it for free
Now for the best part: you can download and use Rocher Color for free! Variable fonts are considered experimental (even more so their color variants), that’s why I’ve decided to make it available for everyone. This may change in the future, so go ahead, customize and download it now.