How to Make a Full-Featured Font using Custom Letterforms from Illustrator

Take custom vectors from Illustrator into a font creation app

This tutorial is a follow up to one of my older posts on how to create custom letterforms in Illustrator, this time showing you how to take vector letterforms from Illustrator and convert them into a full font that you can use in your designs.

Step 1 - Prepare the document

Open your Illustrator document with your custom letter forms, and make sure the artboard is pretty huge. I would say around 16000 pt wide and 4000 pt tall.

Step 2 - Scale your letterforms

Hopefully you will have used guides when drawing your letterforms to ensure consistency, however we still need to decide their relative size in comparison to other fonts. The easiest way to do this is to grab the Type tool in Illustrator and type out a sample sentence using a standard, well-known font at 1000pt. Some good examples are Helvetica, Arial and Futura for sans-serif fonts or Times, Georgia and Baskerville for serif.
Then scale your letterforms appropriately, you should try to approximately match the size of these standard fonts. You can go slightly larger or smaller depending on factors such as the width of your letterforms but nobody likes a font that's twice the size of every other font on their system so try to keep it roughly the same size as these standard fonts.

Step 3 - Measure your scaled letterforms

Show rulers in Illustrator and ensure the unit of measurement is points. Draw a guide at the baseline of your font, then drag from the top left corner of the rulers to reset the 0 mark to the baseline guide.
Draw guides at the Descender, x-Height, Cap Height and Ascender of your font. Making note of their position in relation to the baseline.
For example here my guides are:

Ascender: -800

Cap Height: -700

x-Height: -500

Descender: 200

Step 4 - Open your font creation app

I am using Glyphs app for Mac as it is my preferred tool, however the workflow should be applicable with other font creation software such as FontLab (Premium), FontForge (Open Source), Birdfont (Donations) and many others.
With Glyphs, create a new document and open the Font Info panel. In the first tab you can name your font, enter copyright info, set the version number and input other parameters.
In the 'Masters' tab we can define metrics for our font. Multiple Masters can be used in Glyphs to manage the process of creating different weights for the same font, however that is more advanced and specific to Glyphs. We are just going to set up one Master for our font. There should already be one Master there, so simply edit it. If your font is light, bold, condensed or extended then update the Proportions section appropriately. Otherwise leave them as Regular and move on to the Metrics Section.
In the Metrics we need to enter the information that we gather in Step 2. Convert negative values to positive and vise versa then enter them into the fields provided. For example, if your Ascender guide was drawn at -800 it is 800 points higher than the baseline, so enter 800 into the font info panel.

Step 5 - Copy into a font creation app

Now we need to copy and paste our letterforms from Illustrator into our font creation app. This is as simple as it sounds, copy each letter from Illustrator and paste it into the corresponding glyph. When you do this you may be shown an 'Unusual Bounds' dialog click 'Correct Bounds' and continue.
Note: I assume that most apps allow pasting of vectors, however you may need to use an alternative method such as importing svgs.

Step 6 - Add numbers and symbols

Uppercase and lowercase glyphs are added by default when you create a new document in Glyphs. Some other apps may also have glyphs for numbers and symbols, but if they do not then we need to generate them manually. Expand the 'Number' dropdown in the sidebar and right click 'Decimal Digital' then select all of the numbers and click Generate.
Repeat this for all of the symbols you have designed. The most common symbols are grouped under 'Punctuation' and 'Symbols' dropdowns. It may take a while to find the ones you need, so I recommend adding the whole list then deleting the symbols that you don't want.

Step 7 - Reset all spacing

When you are happy that you have all of your letters, numbers, symbols and accents pasted into the appropriate glyphs, select all glyphs (excluding the space) and at the bottom of the left sidebar enter '50' for the left and right horizontal spacing (LSB and RSB).
Double click any glyph then choose the 'Text' tool from the top toolbar to enter a kind of preview mode in which you can now type with your font and test it out. If the spacing between letters is too narrow or too wide, repeat Step 7 and use a different value (I ended up using 35 for Shoreditch) for the spacing or tweak on a glyph by glyph basis (but keep it general do not worry about specific pairs of letters yet).

Step 8 - Define kerning pairs

Kerning is the space between pairs of glyphs, you will probably notice that even after setting the spacing of all the glyphs that some pairs do not look right together. A prime example of this is the V and the A.
Luckily kerning pairs allow us to fix the spacing between specific combinations of glyphs. For the most common kerning pairs check out this list. This part of the process will vary massively depending on which app you are using. Some apps such as Fontographer include an Auto-Kerning feature which is very useful.
In Glyphs, kerning pairs are created by typing two letters next to each other with the Text tool, placing the cursor in between them. Then giving both letters a Group value (normally just the letter, for example V or A) and a kerning value on the left side of the second glyph (A in this case) which corrects the spacing. For example '-60'.
Now whenever these two letters are used the A will have -60 spacing. Each time you create a pair you will only need to define a new Group value if you haven't defined any kerning pairs with that letter yet.
For a more in depth explanation of Kerning in Glyphs check out this tutorial.

Step 9 - Export your font

Finally we can export out font and test it out for real. In Glyphs go to File > Export, choose your desired format and export destination then click Next.
All done! Now locate your font file, install it and try it out :)

Download Shoreditch

Download the font used in this tutorial. Shoreditch is a slightly condensed sans-serif typeface, with rough edges and round corners for a retro print effect. Perfect for titles and headlines, included are uppercase and lowercase letters, numbers, symbols and stylistic alternates for extra flair.

Related Posts

With so many different fonts out there to choose from, sometimes getting the right combination to use in your project can be a tricky task. This round-up uses 10 visual examples of exquisite font pairings and explains what it is that makes them work so well together. Read more

Patterns are a great way to decorate websites, backgrounds, iPhone cases, and anything else that needs more than a white backdrop. But to be able to use the same pattern on many different elements or objects — and make sure it doesn't look like Minecraft — vectors are a must. They allow us to scale to any size without worrying about losing quality. Read more

This tutorial will show you how we created our popular Neon Tubes font, from drawing the letterforms in Illustrator to turning them into a font using Glyphs app. If you don't have access to Glyphs, don't worry you can use whichever font creation application you want.Read more