Creating Color Fonts With Adobe Illustrator & Fontself Maker

The Iconic Gilbert Font

I have been always attracted to typography and the idea of expressing myself through different fonts and typesets. Recently I came across a particular color font called Gilbert Font. Mr. Gilbert Baker was an LGBTQ activist artist and the creator of the iconic Rainbow flag. To honor the memory of Gilbert Baker, NewFest and NYC Pride partnered with Fontself to create a font inspired by the design language of the flag. They named it Gilbert Font.

It was initially designed for catchy headlines and banners to be used at rallies and protests.

The font is available in two variations (standard vector font and color font) and they localized it for almost all languages. The color font currently is available for Photoshop CC 2017, Illustrator CC 2018, InDesign CC 2019, and above.

This was the first instance I realized how powerful color fonts can be and how quickly they can send a message to the illogical part of the brain that picks up emotions, feelings, and moods.

What is a color font?

Color fonts represent a crucial evolution in digital typography. They can impact any type of text, since they may contain any type of characters, including emojis and icons. However, it's more accurate to call them chromatic fonts because they can include multicolored, grayed, or single-toned characters. Color fonts are stored as SVG data inside OpenType font files. This SVG (Scalable Vector Graphics) format can hold vector shapes with color or gradients.

A color font file is generally larger than a regular font file but color fonts (the ones that I created) based on vector glyphs can be resized without any loss, just like any regular font.

Color fonts are still pretty rare to find these days due to their novelty. But they started to become more and more popular thanks to a software and extension called Fontself Maker.

Fontself Maker

Fontself Maker is an extension for Adobe Illustrator and Photoshop CC to quickly turn any lettering into OpenType fonts. You can create any standard letter font, special character, accented letter, glyph, ligature, and symbol with it. You can add many alternates to regular fonts such as italics or bold versions. You can also adjust spacing and kerning, and use their typography template.

The Localization Problem

The other day we received a Holiday Brochure by mail sent by Nordstrom advertising their new "Make Merry" campaign. I normally just throw away brochures like this but this time I became attentive to the design and the fonts they used for this campaign.

I clearly recognized the colored vector fonts. And I suddenly realized that if Nordstrom would have approached me to localize their brochure into Hungarian, I would need to find a solution for re-creating or substituting their font with a similar font. I have been circling around Fontself Maker for a while but the brochure gave me a push to give it a try and create my own color font that includes Hungarian accented characters so that I can translate the text while keeping the original feel and look.

The Creation

Configuration


I started by creating some sketches to have a general idea of how the letters were designed. Then I moved to Illustrator. Fontself Maker has its own template that is very useful since it's set up in a proper way. It has the correct color mode; the guides and layers are established in it; and it has all kinds of letter shapes including Cyrillic letters which can be used as a guide to drawing your own. To use, open the Fontself panel (Windows > Extensions), open its panel menu, and select the template from it. You can follow their instructions there.

However, I decided that I would not use a template for this font because they are fairly simple and they are just geometrical shapes. Before I began, I did some research and I learned that the most important thing about a new Illustrator file is the color mode. It is best to set it to RGB when designing OpenType-SVG color fonts. If you work from a CMYK file, Fontself will convert the colors based on your color management settings.


Creating Grids and the Baseline


After configuring my document, I set up my baseline using the Rulers and guides (View > Guides > Make Guides) and I named the layer "Baseline1". This will be important later when you start importing letters in a batch. Fontself recognizes guides by their names: ascender, cap-height, x-height, baseline, and descender. I created 26 simple 4x6 grids for the regular English alphabet and set them up on my Baseline1. Then I added additional grids for the accented letters on "Baseline2" below. However, for the accented letters, we cannot use the batch importing option: we need to add them one by one as glyphs. For the grids, I created a simple rectangle with the Rectangle Tool, then clicked on Objects > Path > Split to split into a grid, and I entered the number of rows and columns.


Drawing and Coloring


Once the grid was ready, I started to draw the letters using the Pen Tool and the Arc Tool. When I was done with the drawing and had the shape of the letters, I selected the whole object one by one, clicked on Object > Live Paint Brush > Make. This step makes it possible to use the Live Paint Brush. The Live Paint Brush is a remarkable tool because rather than painting or filling the whole object, it recognizes shapes and lets you chose the area to be colored. And this is exactly what we need in this particular case. I had previously set up my color palette using 6 different colors. Then with the Eyedropper tool and the Live Paint Brush (K), I filled out the desired areas.

Optimizing


To expand the live paint groups, select all that you want to expand and then click on the button Expand in the control panel or in the Quick Actions section of the Properties panel.

I also learned that directly dragging the result into Fontself Maker will result in bad letter shapes with far too many points. We need to do some optimization.

Open the Pathfinder panel. First of all, we need to go into its menu and open the Pathfinder Options. Select Remove redundant points. This is a powerful option, which you have to set again and again. Then select the objects and then click on Merge. Merge will combine objects based on color. I also grouped my characters together once they were filled with color. Before importing them, you want to make sure that each one of them stands as an independent object or shape.


Importing the letters


From here, this part is quick and easy. We open Fontself Maker (Window > Extensions > Fontself Maker) and simply drag and drop the characters. If you set up the 26 letters that are all on the same baseline, you can import them all at once: Fontself Maker will recognize them and will attribute the corresponding letters to your shapes. Special characters, symbols, or glyphs need to be imported one by one and given their appropriate attributes. Create a new font by clicking New. Fontself maker will ask you if you want to make a new font or a new style (a version of your existing font). Now we are ready to import the fonts.

Creating alternates


If you look closely at either the Gilbert Font or the fonts on the Nordstrom brochure, you will see that they use some alternates for some letters. In Fontself Maker you can create alternates as well. We select the shape on the artboard, then enter the letter in the Fontself panel and click on Create Glyph. Fontself will then ask you if you want to Replace the existing glyph or create an Alternate (or cancel). Click on Alternate and this is done.

When using a font that has an alternate option, shower the Type tool on the letter and a little pop-up window will appear below with the alternative option. I think that this is pretty awesome.

After you are done creating your font, Fontself will display it to you. If you need to, you can adjust the spacing and kerning of them.


Other features


Although Hungarian does not have them, we treat two (or three) letters as one sound and one letter, such as the SZ, ZS, LY, CS, NY, DZ, DZS, TY, GY. I wanted to try the ligatures option and went ahead and created a few of them. You can even create a little spider if you wanted to and use it as a dot.

The Result

When I saved and installed the font on my computers, I was very happy with the results. Although the design is simple and there are always some refinements one can make when creating a font, I thought that for the first try it was fairly impressive and I immediately named my font Merry Font. Most importantly, I noted that if the Nordstrom assignment were a real one, I would have tackled it successfully.

In our digital age, personalization and expressivity are keys.

I was convinced about the power of color fonts and I am ready to explore more design and challenges. I hope you enjoyed this short post about my localization challenge using color fonts in Illustrator with Fontself Maker.

Watch my short video of the story and creation of my first color fonts:

Author: Annamaria Szvoboda, December 13, 2020