Rethinking Multi-layered Fonts

Flagsmith was a fun collaboration with Always with Honor that allowed us to explore the challenges related to the user flow and creation of multi-layered fonts. Throughout the process we explored many existing typefaces to see how they balanced ease of use with education, all while dealing with the technical limitations of the font format. We saw this as more of a UI design problem to solve. It just happened to exist within the boundaries a font.

Chromatic fonts have always been clumsy to work with. Multiple textboxes are usually involved, with duplicate content cluttering the artboard. Edits to text and color become an annoying dance of counting arrow key presses.

When dealing with icon or dingbat fonts, there’s also a struggle of wading through a noisy glyphs palette, or figuring out which random key has been assigned to an icon. Add to that the complexity of trying to figure out which combination of glyphs are needed to create the whole illustration, and you begin to understand why there aren’t a whole lot of multicolored dingbat fonts out there.

FF Dingbats 2.0, by Johannes Erler and Henning Skibbe, has one of the more successful solutions to the problem. Each layer is placed using the glyphs palette, but after inserting a shape, the related pieces are displayed, to help eliminate the guesswork. After inserting the glyphs, OpenType features are used to to snap it all together. While setting is not ideal, the big advantage is that everything is in a single textbox, and if color adjustments are needed, you only have to deactivate Stylistic Alternates.

In single color dingbat fonts, a number of recent typefaces have eliminated the need for the glyphs palette by taking advantage of OpenType features. Similar to how a typeface can be programmed to swap out an fi ligature every time someone types an fi, the font can listen for whole words, and swap it out out with a glyph of our choice. For example, when someone types ‘time’ we could swap it out with a glyph that has an icon of a clock, as in Symbolset.

However, if we apply this method to multi-layered dingbats, we run into a problem. Each glyph occupies the same space in the textbox, and there’s no practical way to select and color individual layers.

The easiest solution would be to assign each glyph of the word to correspond to a layer of the drawing.

In Flagsmith, this is actually what happens behind the scenes, but from a user’s perspective it’s not intuitive. It requires knowing exactly which letter controls each layer of the drawing, in order to color properly.

Sometimes in order to simplify, we need to slow things down. We ended up deciding to add an intermediate step, replacing the keywords with layer separations. This is similar to the solution FF Dingbats arrived at, except rather than using glyphs palette to find the layers, we’re using OpenType substitutions. The best of both worlds!

Another challenge with Flagsmith was giving users the power to create unique combinations and compositions. Most dingbats have a final lockup that is pre-determined, so there’s not a whole lot of room for personal flair. This is fine in most cases, but the whole purpose of a flag is to communicate a sense of identity. It was very important to provide some way to layer and customize the flags, giving them a life of their own.

Knowing that we wouldn’t be in control of the final executions, or which shapes a user would combine, we decided to build contextual alternates. While we couldn’t cover every possible combination, we tried to address some of the more awkward situations. Some shapes will automatically change size, position or shape, depending on what comes before it.

The type design process is primarily focused on the black and white shapes, and how they relate to each other to help communicate our words. It’s easy to forget that the fonts themselves serve as interfaces, between us and our applications. We should be thinking about ways we can improve the user experience with our typefaces. Even if it’s just making some of the more difficult to reach glyphs in our fonts more accessible with OpenType features. Let’s make our fonts smarter.

Flagsmith was a collaborative project with the amazing design and illustration duo, Always With Honor. For licensing and more info, visit flagsmithfont.com