My entrée into the world of type design and font creation

This week, I began working through preparations for my Autumn semester classes, one of which is Typography.  I’m very excited to teach this course, as I haven’t done it in white a while… though it’s also a bit nerve wracking because I feel a bit rusty on all the technicals.

One project that I will work on this coming term is the creation of a custom font.  I’m still working through all of the details, and I welcome any suggestions you might have for implementing such a project.  I believe that this project (and several accompanying projects) will help students develop a serious, hands-on grasp of not only type as an art form, but type as a technical process as well.

As a part of this project, I’ve created my own very simple typeface that’s based on my handwriting.  I wanted to go through the steps, but I also want to test drive some of the font creation software out there to make sure I select the right one for the class.  After the specimen, I’ll share some thoughts the process, and in particular, my feedback on working with FontForge.

If you’re interested in downloading the TrueType Font (TTF) package to try out in any of your designs, click the link below. 

Download

 

The Process

Despite my initial reservations, this project was pretty straightforward.  Now, I will also say that I did not pay much attention to the explicit “design” of this typeface, as again, it was based on my handwriting… which can be pretty freeform and sloppy.  So, I wanted a loose feeling, some imperfections, and variance in weights, heights, ascenders/descenders, etc.

First things first, I wrote out all 26 letters, upper and lowercase as well as many of the special characters typically included in font packages.  I also wrote out several pangrams (that’s a new one, eh?) to demonstrate the various combinations of letters, spacing, and flow.  While I was working to include some intentional sloppy-ness, I did draw some grid lines with a straight edge to make my life a little easier.  I wrote these out in a nice, black gel ink pen.

From there, I scanned this document into Photoshop and did some quick brightness/contrast and threshold adjustments to make sure my lines were nice and crisp.  Save as…

Adobe Illustrator’s Asset Export panel

I placed the resulting document into Illustrator and performed an image trace on it.  I adjusted several of the settings in the image trace options panel, and when I was happy with the result, I expanded the art into vector shapes.  (Note, that process can take some time if you’ve got a lot of detail in an image like this).  I went through and cleaned up any lines/paths/shapes that weren’t quite right, and made sure that I made compound paths for characters like “i j ? !” so that the character stayed whole for the next step.

 

This project gave me an opportunity to use Illustrator CC’s new “Collect Assets and Export” feature, which I had never used before. Using this function, I was able to simply select each letter (or several objects at once) and drag them into the Asset Export Panel.  Illustrator shows you a thumbnail of each object, and you can rename it by double clicking the thumbnail.  The name you give it here is the resulting filename when you batch export.  I did this with each of my characters (took a while to name them all, yes), and then exported them.  I exported the individual characters as SVG files so that I could later import them to FontForge.

Once I had all 104 SVG files saved, I turned my attention to working with FontForge to create the actual, usable font.  After a little futzing with XQuartz and FontForge, I was finally able to get the program to work.  I was a bit surprised at the lo-fi interface, but the software is really powerful…and, hey, it’s a free, Open Source title, so I can’t complain.

I imported each of the character files and mapped it with its correct Unicode character in the FontForge character panel.  Once the files were imported, I did have to go back through and manually adjust sizing for things like x-height, ascenders/descenders, width, and kerning.  It took me a bit to get used to FontForge’s UI and feature set, but I found it relatively intuitive.

FontForge also offers a slew of automagical tools for cleaning up, fixing, and validating your font.  When I first tried to generate the TTF, I got about 4700 error messages, many of which I didn’t understand!  Thankfully, FF offers a “fix” option for some of the easy issues.  Their documentation is also pretty comprehensive, and I found many of the answers there.  I was finally able to validate the font package!  I adjusted a few settings (and meta data), and ended up with a totally ready-to-use font!  I installed it through FontBook on my Mac, and sure enough, there it is, all ready to use.

Full disclosure, I did have to export/install/remove/fix/export/reinstall about 50 times, but I’m ok with that since this was my first crack at using FontForge.

All in all, this was a really satisfying project.  Especially seeing my font pop up in the font menu in Word and being able to play around with it in several different applications.  I learned some lessons along the way, and I will do a few things differently next time.  I’m excited to continue working on other font projects!

Next up, I’m going to work on the same process using FontSelf, which is an add-on for Illustrator and/or Photoshop.  I don’t think that my IT department will appreciate having to install and configure XQuartz and FontForge on all the workstations in the lab, and I’m hoping that FontSelf is a much cleaner solution.  I’ll be following the great tips from Mary Winkler over on TutsPlus.

Thanks for reading!

If you’re interested in downloading the TrueType Font (TTF) package to try out in any of your designs, click the link below. 

Download

Leave a Reply

Your email address will not be published.