Skip to main content

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.

Gilbert Font

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:

Creating Color Fonts in Adobe Illustrator with Fontself Maker

Works consulted:

Contact me:


Comments

Popular posts from this blog

A Closer Look at Netflix's Timed Text Style Guides and Subtitling Best Practices

  Table of Contents Introduction Netflix Timed Text Style Guides Technical aspect Linguistic aspect Forced Narratives Trailers Subtitles vs. CC Conclusion Resources Appendix: SDH Identifiers Table - HU Watch my short "hook" about this post here: Download the slides  here . Introduction Subtitling and audiovisual translation Dubbing and subtitling are very creative processes. Whether the audience watches with dubbed audio, or in the original language with foreign language subtitles, closed captions, or forced narratives, the ultimate goal is to make the shows enjoyable and resourceful. As well as making sure that any text is timed appropriately to the action, capturing creative vision and nuances in translation is critical for this goal. Audiovisual translation is like creating 3D translations. In traditional translation projects, you have the source text and the target text. It's two-dimensional. With audiovisual translations, you have the source text, the visuals...

Contentful Headless CMS - l10n & i18n

Exploring Contentful for Translation and Localization It seems there is a new buzzword in the website building industry: headless CMS (Content Management System). But what is exactly a headless CMS and how does it work? In this write-up, I am going to walk you through the different steps of how I explored one of the most popular headless CMSs, Contentful; how I created a simple website with it; and what approaches I took to localize the website into another language. In the end, I realized that I needed a completely different mindset on website building and localization in general. And I had a clear vision of when a headless CMS is useful and when it is recommended to use a traditional CMS, like WordPress, instead. Finally, I learned a lot about Node.js, Gatbsy.js, website deployment, and the many challenges i18n problems introduced into the subject. Part 1: Headless CMS & Contentful What is headless CMS? A headless CMS is a platform that has no default front-end system to determin...

Discussion: Managing Stakeholders

A point of view of a freelance localizer and translator Who was the stakeholder and what was their role? For this discussion, I am going to use my freelancing experiences and use my clients as stakeholders. These clients are mainly LSPs and within that, primarily need to deal with translation project managers or project coordinators. In some cases they are more on the junior side, meaning they are not involved that much in the entire project but only in the coordination between linguists, and in some cases, they are senior project managers who have more interests in the project outcome because they need to manage them from beginning to end and they also need to deal with their clients. In some cases, depending also on the client and the size of the company, the project manager can be the owner or the president of the organization at the same time. As I mainly had pleasant experiences with these stakeholders, I am going to explain how I learned to deal with them in general going into de...