How to Create Your Own Font Using Illustrator and Glyphs App


Hello Brio Studio

I have a very strong urge to write a post that would be dedicated to my love of typography and how creating my own font has been on my bucket list for years. Then I’d tell you that I sucked it up and finally dove in and I created my own font and it was bumpy and took a while, but I did it.

Welp, all of that did happen, and I’m extremely excited about it! But instead of my verbose and overly emotional post, I published a brief post earlier this week with a link to the free download.

Now, I’m going to help YOU learn how to create your own font and save hours of research and speed bumps. I spent a whopping 9 hours on this first font from sketch to export, and when I make fonts in the future it will take significantly less time, and I hope to save you time as well.

How to create your own font using Illustrator and Glyphs app - Tutorial on HelloBrio.com

Overall, here are the materials I used.

Sketch Each Glyph of Your Font

Because this was the first font I’ve ever done, I wanted to create something doodle-y that would fit in with my illustration aesthetic and would also be relatively quick to draw up and design.

I used graph paper, keeping in mind that my font would have 4 equal heights for the ascender, x-height, and descender.

I drew each letter carefully, redrawing letters and characters that I wasn’t happy with.

Sketch each glyph of your font - How to create your own font using Illustrator and Glyphs app - HelloBrio.comRedraw characters you aren't happy with - How to create your own font using Illustrator and Glyphs app - HelloBrio.comKeep in mind your ascender, x-height, and descender - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

It’s up to you how many symbols and other characters you want in your font. I went back later and quickly added some special symbols.

Add in a bunch of extra symbols - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

Scan and Digitize Your Work in Illustrator

After you have a set you’re happy with, scan in your work. Sometimes even seeing it on the screen versus on the piece of paper can help you see which glyphs you need to redraw.

Depending on your preferred workflow, you may want to set up your Illustrator file in advance (next), or perfect your glyphs first. I prefer vectorizing first so you don’t get caught up with bounding boxes. You can always make other tweaks later.

After you have your work scanned in, follow my steps for using Image Trace in Illustrator to get your glyphs to be individual vectors. Here’s your chance to also clean up your work and smooth some bumpy lines with a tablet (follow these tips on how to use your Wacom tablet to smooth your work quickly).

Also, make sure to group each letter (especially those lower case i’s and j’s).

Set Up Your Illustrator File for Glyphs App

To make the transfer to Glyphs App easier later, it’s best to set up your Illustrator file so that you can quickly copy and paste each glyph.

To do this, I found this video which helped me immensely. To set up your Illustrator file:

  1. Create one new file that is 1000x1000px
  2. Set your grid lines to be 100px with 4 subdivisions
  3. Each letter will be no more than 100px square, so each major block will be space for one letter. Move each letter to line up with the correct grid subdivisions. Set up your Illustrator file so that each grid line will have a different meaning from beardline to x-height to ascender and more - How to create your own font using Illustrator and Glyphs App - HelloBrio.com
  4. Repeat until your letters are positioned correctly.position each letter in your Illustrator file precisely - How to create your own font using Illustrator and Glyphs App - HelloBrio.com
  5. Draw a 100x100px box around each letter (no stroke or fill value). Use the move and copy tool (CMD+SHIFT+M) and repeat tool (CMD+D) to make sure each of these boxes are precise.
  6. Group each letter with its bounding box.
  7. Use the align tool to move all of your letters to the top-left position (so each corner lines up at 0,0)
  8. Select all of your items and then use Release To Layers (sequence) in the Layers window drop down.
  9. With all of your letters selected, resize them to 1000x1000px. Now each individual letter with its bounding box is on its own layer.
  10. Move up all of your letters and their bounding boxes up 750px (by typing -750px in the y axis field) to make it easier to copy and paste into Glyphs App in the next step.
  11. Save and open Glyphs!

Move Your Characters into Glyphs App

Now here comes the easier part. It’s still a little tedious from here out but you’re very close to finishing.

In Glyphs, set up your file (File → Font Info) so all of your glyphs are 1000 units per Em, and so your measurements are set up as so:

Glyphs Font Settings Ascender 750 Cap height 500 X-Height 250 Descender negative 250 - How to Create Your Own Font Using Illustrator and Glyphs App - HelloBrio.com

Add all of the numbers, symbols, and other pieces you want into your collection. When you’re ready, start adding characters individually by double-clicking the character in Glyphs and pasting the character in from Illustrator.

After you paste from Illustrator, double click on the bounding box in Glyphs and delete the bounding box.

Copy each letter from Illustrator - How to Create Your Own Font Using Illustrator and Glyphs App - HelloBrio.comPaste each letter into Glyphs and delete the bounding box How to Create Your Own Font Using Illustrator and Glyphs App - HelloBrio.com

Open and close each letter and symbol until you’ve copied and pasted each glyph from Illustrator.

When you’re done, highlight all of your glyphs in the app (CMD+A) and change the LSB and RSB (left and right side bearing) in the bottom-left settings.

Export and Test Your Font

Export your font and dump it onto your desktop. Install it like you would any other font and play around with it in Photoshop and Word or similar applications. Take note of any letters that need to be moved or if one set of characters needs to be kerned differently.

At this point in the game, I was pretty excited. And I made this very boring-yet-fun image to post on Twitter:

:O !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! pic.twitter.com/mzsYiU45Lw

— Jennifer Coyle (@jnnfrcyl) November 18, 2014

Congratulations, You Made Your Very Own Font!

By this point, you may have your very own font! Things can only get better from here.

If you’ve never made your own font before but have been wanting to, I highly recommend just diving in. Get the first one “out of the way”, per se, which can help you learn the workflow as well as learn things for future font design.

Make sure to download my free font if you haven’t already.

Advertisements