How to create your own font (part 2)

April 12, 2015 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 2: Using templates and scripting

In a previous post, I've illustrated a basic process of how to create your own font by the means of digitizing hand written letters, and this has shown to be fun and accessible. It is however also quite time consuming, especially the tasks of cropping each letter from the scanned document and then tracing and saving each letter one by one, as well as the task of then mapping the image files to their corresponding letters in the glyphs application. Imagine doing this multiple times if you want to have contextual alternates or do this for all the different styles you want for your font (regular, italic, bold).

So, how much of this can be automated?

In this tutorial, I illustrate how to digitize your own font a tiny bit faster, with the help of some templates, conventions, and some scripting.


Step 0. Prerequisites

The prerequisites for this tutorial are a scanner, a printer, Python installed, basic Python programming knowledge and the Glyphs app. (*the app is not free, but as mentioned in the previous post, you can play with the trial versions for a month, and if you complete the tutorial in this time frame, you will have a font you can use beyond that **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).

It's recommended to skim through the previous post first, as it includes links to resources explaining basic notions of fonts as well as an alternative process of creating the font if Python scripting is not an option for you.


Step 1. Drawing the letters in the template

  • Print a template like this one in which you can fill in all the letters, uppercase and lowercase, digits, special characters, and dingbats that you would like to include in your font. The template helps you keep track of what you have to include in the font, as well as provides guidance on the sizing of the letters.



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

This step is semi-automated. That is, most of the work is done by the script, but it requires some user input.
  • Download the Python code from here. This is an iPython notebook including the code and example output, so if you are familiar with iPython then you can just use it, or otherwise copy the code into a Python script.
  • Open the script in an editor.
  • Add a filled-in template in the scanner.
  • Modify the script like follows:
    • Change the scanline_path to the path where the scanline application is on your Mac.
    • Create a template array similar to the existing template_1 and template_2 arrays that includes the names of the letters that you have in the printed template, from left to right, top to bottom.
    • Define scan settings by setting SCAN_NAME, PREFIX, and TEMPLATE to your values
    • Run step 2 in the code in order to perform the scan and preview the content
    • Run step 3 in order to set some lines that would separate the letters. Play with the values of FUDGE_H and FUDGE_V in order to capture the letters in their entirety and without borders. The lines represent the position at which a crop will be made in order to extract the letters.
    • When you are satisfied with the lines set in step 3, run step 4 in order to crop the letters, trace the lines of each letter, and save both the raster and traced files. The naming of the letters is based on the content of the template array that you are using.
  • The script will have saved one file per letter and automatically name the files according to the contents. Use these files in the next step.

Steps 3 and 4

Steps 3 and 4 are the same as in the previous tutorial. However, the automatic naming of the files now makes it even easier and faster to find the right file corresponding to a letter.


Conclusions

A few improvements in the process of creating the font can help save time, and give more time to focus on the design rather than thinking of the operational aspects.



comments powered by Disqus