How to create your own font (part 1)

December 14, 2014 by Paula Petcu


A tutorial illustrating how to create a font by hand-drawing the letters on paper, digitizing them, and then producing the font file itself. Part 1: Using Adobe Illustrator and Glyphs App.

There are certainly various approaches on how to create your own font, many however requiring to draw the letters directly in an application. Since I would like to keep the irregularities of my handwritten letters in the final design, I’m following the route of scanning my letters instead of drawing them directly on my computer. The approach described in what follows is the best of several trial and error approaches of a newbie in creating fonts.


Step 0. Prerequisites

The prerequisites for this tutorial are a scanner, and two applications that you should have installed: Adobe Illustrator and the Glyphs app. (Neither of them is free, but you can play with the trial versions for a month, and have a font you can use beyond this time limitation).

I’m working on a Mac, and the Glyphs app seems to be available for Mac only at the moment, but the same process should be applicable (though haven't tested it) to Windows users as well when using a similar application.

Before diving into the world of fonts, it’s useful to familiarise with a few notions:


Step 1. Drawing the letters on paper

  • Draw all the letters, uppercase and lowercase, digits, special characters, and dingbats that you would like to include in your font. This is the most fun part of the process, so take your time and enjoy designing your font!


Note At some point, you might also want to consider the different weights of your font - for example, you might want to create a light, regular and bold version of your glyphs - and also consider whether you want an italicised version of your font as well. This can take considerably more time to do by hand, so here you have two options: do it on paper or do it in the digital version at a later time by rotating or modifying weights of lines.


Step 2. Scan, trace, clean, and save the letters

  • After you’re done writing the letters, scan each paper and save it as an image (such as a PNG).
  • Open the scanned image into Illustrator.
  • Apply the Image Tracing mechanism on your image. This will create paths for your letters. You might need to remove extra paths that should not be part of your letters, if the case.
  • Save each traced letter to its own file in the EPS format. This can be done for example by selecting the path(s) corresponding to a letter, and then copying it to a new file. Saving each traced letter to the EPS format will make it easier for you to import your paths into the Glyphs app. Also, choosing a good naming for your files will be of great help in the next step.

Step 3. Map the eps files with the glyphs

  • Open the Glyphs app and create a new font. By default, letters will be included in your font but the digits and punctuation might be missing. From the menu on the left you will be able to add digits, punctuation and other special characters to your font.
  • Drag and drop each of the eps files over the corresponding glyph in the Glyphs app. This is where a good naming of files will help do this work faster!
  • Resize and reposition the glyphs if needed. Click on a glyph to enter into the edit more - here you can move, resize and even modify the paths if needed. The Glyph app helps you by providing some guidelines on where the glyph should be positioned.

Step 4. Final steps: save and install font

  • Save your font from the Glyphs app. In the font information menu you can also give it a name. This will save your font with the file extension .glyphs.
  • Export it. This will save your font in a file that font management applications can read.
  • Open a font management application to install the font. To do this on a Mac, go in Finder, right click on the exported font file and open it with the Font Book app. Click Install.
  • Now you’re ready to put your font to the test! Open an application such as a word processor or image processor and write some text with the new font.

That extra mile ...

A more advanced feature of fonts in the OpenText format is allowing for contextual alternates. Especially when designing a font that is to replicate handwritten letters, it is often desirable to avoid the same letter being written the exact same way, one after the other. We have to acknowledge that if we were to write the same letter over and over again on paper we would find small differences between the instances. By adding contextual alternates, the resulting font would look closer to the natural form of handwriting.


Conclusion

Creating a handwriting font is fun and accessible. While this method was intended mainly for creating a font of handwritten letters, I could see that this process could maybe even be used in creating fonts with more advanced design features. There is some time and effort that needs to be put in digitizing the letters, yes, but some of the steps listed in this tutorial could potentially be automated - this is something for a future blog post.



comments powered by Disqus