Monika Gause is a graphic designer, tech writer, trainer, Illustrator nerd and Adobe Community Professional. She created a family of color fonts for one of her professional projects & shares about her experience with Fontself Maker, an extension that brings font creation features to Adobe Illustrator.
This is a two-parts article: Part 1 covers the creation of color lettering in Illustrator, while Part 2 focusses on turning colorful vector shapes into OpenType-SVG fonts with Fontself.
A foreword
I’m creating tutorials on Adobe Illustrator. For a recent tutorial that I’ve made for LinkedIn Austria, I needed a font to demonstrate Illustrator’s new ability to use color fonts. Since I provide demo files for my trainings, I also wanted to include a font with it and not just point users to existing fonts. The training had to be finished in a matter of days and there wasn’t really much time to make that font. I had previously been invited to the Fontself prerelease and wasn’t too active in it, but then the color-enabled version arrived just in time for this to be pulled off.
Now I just have to add that since I started in desktop publishing, I was also interested in creating fonts (among a number of other fields of interest) and several years ago I have been using Fontographer to make mostly icon fonts, logo fonts and signature fonts. I had also attended type-design and typography conferences at that time, so I wasn’t really inexperienced.
Since there wasn’t a lot of time, the design had to be simple. I’m a big admirer of Bauhaus movement and especially their type design experiments so everything came together here. For my font I made one sketch and then went into Illustrator to build it.
To template or not to template
From the Fontself panel you can open a template file and draw your letters in it, which is handy, because it’s set up in a proper way, it has the correct color mode, guides and layers in it as well as a lot of letter shapes you can use as a guide to draw your own. To use it you can just go to the Fontself Panel, open its panel menu and select the template from it. This works when there’s no file open in Illustrator. Then read the explanations directly in the template file on how to use it.
If you don’t want to use the template for whatever reason, you need to watch out for some stuff yourself when setting up a file.
Setting up a file and what to watch out for
The most important thing about a new Illustrator file is the color mode. It is best to set 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, so you better make sure it’s an RGB Mode in the document profile.
For Mobile, Web, Film & Video or Art & Illustration files, the default document profile is RGB. In older Illustrator versions, you can select the new document profile from the Profiles menu in the New document dialog box.
Align to pixel
When working with delicate letter shapes the one thing that you don’t need is Illustrator’s align to pixel grid (this pixel snapping setting is unfortunately set by default in most of the RGB document profiles). So make sure you turn it off, because it would always align vertical or horizontal path segments to the nearest pixel and it would also mess with circles.
When setting up a new document in versions prior to CC2017 you turn off the setting Align new objects to the pixel grid and you’re done.
In existing documents that same setting is in the Transform panel.
It’s an object based setting. If your objects behave strangely, select them and make sure the setting Align to pixel grid is turned off in the transform panel.
In newer versions you can uncheck View > Snap to pixel or uncheck the Align art to pixel grid setting in the control panel.
Guides
You can set up guides that Fontself honors when creating glyphs. That way you can perfectly align your shapes along the baseline or position accents and punctuation in the Illustrator document. Circles need to extend below the baseline and punctuation marks don’t even touch it — it would be difficult having to align this in the Fontself windows for each of the glyphs separately.
Fontself recognizes guides by their names: ascender, capheight, xheight, baseline and descender. Since you might not want to design all of your letters in one row, but rather in multiple rows, you can have more than one guide that has each of those names. You need not create all of those guides, just the ones you find useful in your work. In order to make a guide you can either drag them from the rulers into the document or draw a line and then View > Guides > Make Guides.
Layers
Having all the faces in one file made sense for me — only when I needed to invest some more effort into the »Light« face I moved it to a new file. I’ll be coming to that later on. For a long time during working on the font I also had them all on the same layer. That didn’t make too much sense anymore when I got into the details of creating Punctuation. There were so many that you will get lost. Sorting everything into layers when there already are lots of letters, is the kind of work nobody likes doing, so it’s better to create a layer structure for the file from the very beginning and then use it strictly.
When I created a new letter, I always started with the regular face of the font. Then copied the letter and moved it on the artboard as well as in the layer structure to the according place in order to assign the other colors.
When working in specific sections of the font I can turn off the other layers so that they don’t distract me in that big file. This is especially useful when you complete your font. To set up these layers you have to find a system that works for you. In Fontself you can also focus on several groups of glyphs to check what you already have included. Setting up the layers in a corresponding fashion makes sense.
Building the grid in Illustrator and working with it
As a base for my font I need a 3x3 square grid and a quarter circle line. I drew the grid using the rectangular grid tool in Illustrator. To draw the quarter circle I use the Arc tool.
With the rectangular grid tool in order to draw a 3 x 3 grid, you click and drag and while the mouse is still down, press the Arrow-down-key and the arrow-left-key to reduce the number of dividers. Then in the end press the shift key to get a square grid. Since the grid for all the letters is the same, I make a copy whenever I need it. When working like this I like to have multiple base elements in the file, just in case I accidentally forget to make a copy first and then alter it.
My letters also contain the quarter circle, which is drawn into the grid. In order to snap it precisely I use Smart guidesand then move the Arc tool to the starting point. The smart guides highlight it and then I click and drag the quarter circle with Shift key pressed. The default setting of the Arc tool then makes a perfect curve. In case you have altered the basic setting, you need to set the options like this:
I needed the arcs in different directions. In order to flip it, you press F while the mouse is still down. It’s much more elegant than rotating the arc after creation.
I first prepared the letter shapes that I had already sketched with black outlines.
Construction of letters with live paint
In order to construct the colored glyphs out of basic shapes in Illustrator you have different methods at your fingertips. Pathfinder functions are the oldest method, then there is the Shape Builder Tool or the latest addition Shaper tool. My favorite tool is the Live Paint Tool, especially when I have to work with both closed & open paths, and when I want to edit their construction afterwards. In this case with my preliminary rough sketch and no additional testing, I might need some heavy editing, so I definitely went with Live Paint.
Live Paint can also make use of swatches. In order to use that efficiently, you first clean up the swatches panel and delete all of them. Then add new swatches of the colors you want to use. In CC2018 Illustrator creates global swatches by default, which is perfect for this. With only four swatches, filling the shapes will be done very quickly.
Set up the Live Paint Bucket tool in order to get the swatches preview onscreen by either double clicking the tool in the tool panel or by clicking on the tool options button in Illustrator CC 2018’s Properties panel.
To use the Live paint bucket tool, you first have to select the shapes and paths that you want to fill. Press Cmd (Ctrl on Windows) to temporarily change to the selection tool and select the shapes (I click & drag a selection rectangle). Then click into one of the areas with the live paint tool to create the first fill and turn the object into a live paint group. You can then go on and click into areas surrounded by paths to fill them with color. You can even click & drag the bucket to fill multiple areas in one go. In order to switch between colors, press the arrow-right or arrow-left keys.
If you later decide that the red areas should be blue, then select the blue color in the Live Paint Tool and triple click on one of the red areas.
The black strokes are no longer needed once the letters are colored. Select all the object with the Selection tool and then set the stroke color to None. You should do this before expanding the live paint objects, because it’s much easier to clean it up at this stage.
Make a copy of the live paint groups before expanding them. You might need to come back to them later. It makes sense to keep all these building shapes and leftovers and live paint groups on a separate layer that you create for this purpose.
Expanding and some optimizations with Pathfinder functions
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 Actionssection of the Properties panel. When you expand a live paint object, what you get is not at all optimized or even neighbouring same colors combined. In my case it’s even quite simple, but nevertheless shouldn’t be made into a font directly.
Directly dragging the result into Fontself will result in bad lettershapes with far too many points. You need to do some optimization. Fortunately this is pretty simple.
Open the Pathfinder panel. First of all go into its menu and open the Pathfinder Options. Select Remove redundant points. This is a powerful option, which you unfortunately have to set again and again.
Then select the objects and then click on Merge. Merge will combine objects based on color.
For some letters Merge will also create some unfilled and unstroked objects (in the counters) which we will take care of later. You have to watch out for these every time when using Merge in any project. In most cases it’s safe to delete them.
Compound paths and the winding rule (fill rule)
In my example Illutrator’s Live Paint feature took care of punching holes. If you don’t use it you will have to punch them yourself. Holes can be built by numerous ways, but in the end there will always be a Compound path. It becomes especially tricky with script fonts when you create them by just drawing with Illustrator’s brush tool. Fontself is very forgiving and fixes stuff for you, so when you just drag the shape into the Fontself panel then Fontself will even expand the brush stroke for you. But then what you will get is a self overlapping shape which will look okay when typing, but might still bring users of your font into trouble, e.g. when they apply a stroke to their type (they will do that, trust me).
In order to prevent this, when you have drawn your letter, of course make a copy of it, because editing is done best when the brush is still live.
Then expand the brush stroke using Object > Expand appearances.
But then you’re still not done. In order to have full control over what gets into the font, you should apply the pathfinder Merge to this as well.
But again: take care of the invisible objects. They shouldn’t be in your font.
The colored shape is now a Compound path. This is an old kind of object that every vector application can handle. If you get a hole or not, depends on the winding rule (or fill rule) setting and the path direction. In Illustrator you find this in the Attributes panel. The easier fill rule is the Even-Odd setting, but with fonts it’s better to use the Nonzero winding rule, because that’s what they work with.
When this rule is applied, you can select single paths with the direct selection tool and use the buttons in the Attribute panel to mirror the path direction. Then the hole will get filled or vice versa.
Stay with us: now jump to Part 2 of this article, to learn how you can convert your colorful lettering into an OpenType-SVG color vector font with Fontself Maker.
