colour font tools & formats

Peter Constable

I'm curious: for those who make (or have made) colour fonts:

• What tools do you use to create the artwork, what's the format for the artwork?
• What tools do you use to build the font?
• What font format do you use (CBDT, COLRv0, COLRv1, sbix, SVG)?

RichardW

I'll start the answers with a low tech answer.

The artwork is created by direct encoding of quadratic contours' points (as triples of x, y and on/off) which are embedded in PostScript and viewed in Ghostscript.  I wrote my own font compiler.  I use COLRv0.  The work is not very ambitious - I use colour to distinguish homographs when using a spellchecker, so the whole uses three colours - foreground, background and red, which I hope is resistant to the ill-effects of colour-blindness on legibility.  I'm currently wondering what I should use as a fourth colour.

Ray Larabie

I made a some color fonts in 2016 using TransType. Each color layer was a separate font with layers drag/drop arranged and colors manually set for each layer. I exported as SVG, sbix and COLR. If I recall correctly. there was a bug that caused the SVG font to be displayed upside-down in some applications. I submitted a bug report six years ago but I don't think it's been addressed. TransType is a quick and easy way to colorize existing chromatic (layered) fonts. One limitation is the lack of a palette saving feature so you need to set the colors manually each time. Another issue is the lack of control over the monochome fallback font. It's unfortunate that they've neglected TransType becuase it's an easy-to-use tool that doesn't require knowledge of any particular font design application to generate color fonts.

Sérgio Martins

Back in 2015, SVG-OT was what we used to make Trajan Color, although the tools to do so were mostly custom, in order to import (and clean) SVGs files made in Illustrator. I too remember the upside-down display; if I recall correctly that was not a bug, but a result of the SVG coordinate system rendering from the top-left corner, instead of the bottom-left.

These days, I mostly help students with their colour fonts and they often use sbix and COLR/CPAL, through the Glyphs built-in tools.

Adam Twardoch

TransType 4 was released before FontLab VI. The apps share its import/export code, but we’ve since vastly revamped that code as part of the FontLab VI & 7 development.

Unfortunately, it became a bit difficult to integrate those changes back into TransType. Also, the development of FontLab VI & 7 has been so massively involving that we weren’t able to find the time to finalize our work on TransType, but we are working on it! 

Adam Twardoch

FontLab 7 is if course more expensive than TransType, but it has many hundreds of improvements, including much better OpenType+SVG export. 

Ray Larabie

I'll wait for a TransType update someday. I have FontLab 7 but I prefer the TransType interface for that sort of work.

Igor Petrovic

I have spent a significant part of my type design journey exploring color fonts, and finished 4 of them. I have used Illustrator for drawing and Fontself (Illustrator plugin) for assembling the font. 

Fontself proved to be perfect for this purpose, because it was planned for small to mid type design projects and it is supereasy to use. You just make each glyph a group in Illustrator, and drag it into slots in Fontself. Then you just name the slot by the glyph you want it to represent.

It has decent functionality like spacing, kerning, kerning classes, ligatures etc. Being a plugin it's a bit uncomfortable for very precise spacing and kerning (I used +-5units as grain size), but it's still pretty ok and worth of effort.

It exports .OTF, I believe SVG-based.

So because Fontself served me perfectly, a much bigger challenge for me was the creative side. It's not as easy as it looks to produce usable and meaningful color font. For example, establishing even color texture in unpredictable glyph combinations probably means all the glyphs have to have all used colors (if 3 colors are used each glyph has to contain all 3 of them, with some exceptions for very simple letters like uppercase I or something).

Make them work over different backgrounds in the situation where the pallet is fixed sometimes mean to have a white stroke around each letter (like a sticker). 

Also, color fonts should be used at very large size in order to shine. In that sense, they are beyond the display category, more like "ultra-display". In most cases, it's just a word (branding), sometimes even a single glyph (drop caps/initials), headline, quote etc.



  

Peter Constable

Ray Larabie said:

If I recall correctly. there was a bug that caused the SVG font to be displayed upside-down in some applications. I submitted a bug report six years ago but I don't think it's been addressed. 

The original spec for the SVG table was not sufficiently clear about how the SVG coordinate system needs to be handled in an OT font rendering context. The issue you mention was the result of misunderstanding on this very issue. There were significant changes to the SVG table spec in OT 1.8.3 to clarify how the coordinate system needs to be handled. You might find newer implementations have improved in this regard.

Peter Constable

Igor Petrovic said:

I have used Illustrator for drawing and Fontself (Illustrator plugin) for assembling the font. 

Fontself proved to be perfect for this purpose, because it was planned for small to mid type design projects and it is supereasy to use. ...

It exports .OTF, I believe SVG-based.  

Yes, Fontself produces fonts with SVG tables, regardless of whether the artwork is vector or bitmap, and for vector, regardless of the nature of the artwork. I think that's unfortunate: I've seen a lot of OT-SVG fonts that have bitmaps embedded in the SVG table that could have been implemented more compactly using the 'sbix' table. And I've seen a lot of OT-SVG fonts that use only solid colour fills and, hence, could have been implemented more compactly—and be more widely supported—using the COLR table.

Roel Nieskens

Fontself probably chose OT-SVG because it had the widest support at the time, not because it was the most technically optimal format.

Luckily we have a new format that fixes the problems of all the previous formats. Now it only needs to be implemented everywhere, and we're done :-)