By Alec Julien

Always looking for typographic inspiration, I bought a cheap calligraphic pen set over the summer, convinced that my doodles with it would make some magical letterforms. A week and dozens of pages later, I was left without anything interesting or vaguely artistic. Then, one night, tired and despairing, and having run out of black ink, I plugged in a red cartridge, and sketched out the alphabet that would soon become the Joules family. I thought it might be interesting for some of you if I documented some of the font-creation process with this case-study.

Here’s one of the many pages I sketched that night:

And a closeup:

Here’s a super closeup of the capital A I wound up using.

From Sketch to Font

The process I used to create Joules from my sketches is the very same process I outlined in my previous articles on font creation. I scanned in the page, and here’s what it looks like in Photoshop after changing the scan into a black-and-white bitmap.

Notice how the rough spots in the original drawing come through in the bitmap image:

I usually clean up the bitmap image before importing it into FontLab, but didn’t in this case. Here’s the first pass importing the bitmap into ScanFont:

And the ScanFont closeup:

I copied the new glyph and pasted it into the appropriate slot in FontLab. To give you a taste of what sort of tweaking goes on in FontLab, I’ve zoomed in here on the rough “A”. I selected a trouble spot:

And started the tweaking by deleting some offensive nodes:

One of the big things to balance when tweaking glyphs in FontLab is the temptation to smooth out all of the outlines versus the temptation to leave lots of rough spots to keep the font interesting. I’ve discovered the hard way that with handwriting fonts you don’t want to smooth out all the rough spots, as that begins to rob some of the handwritten feeling of the letters.

Composite Glyphs to the Rescue

One of the neat time-saving features of FontLab is automated character composition. In this case, I’ve created an “A”, and I’ve created a “grave”:

And now I double-click on the cell for “A-Grave”…

…and FontLab creates a composite glyph:

At this point, if you edit the “A” or the “Grave”, the changes will be immediately reflected in the “A-Grave” composite.

Sidebearings

As mentioned in my previous article on font creation, setting good sidebearings is an important step. (For one thing, good sidebearings make for easier kerning!) For initially tweaking my glyphs, I generally set rough, small, positive sidebearings. My “y” sidebearings looked like this during my initial editing:

The problem with these sidebearings can be illustrated by looking at the initial kerning setup for an “ay” pair:

I could’ve just left the sidebearings as they were and kerned the “y” closer to the “a” (and, after that, kerned the “y” closer to every other character), but it’s much easier (and saner) to set a negative sidebearing for the left side of the “y”:

Here’s what the initial kerning looks like with these better sidebearings:

Kerning

Oh, the hours of fun I had kerning this font! I’ll spare you the boring details. But here’s one example of kerning at work. Before kerning:

And after kerning:

Ligatures

I created a bunch of ligatures in Joules that one could manually select and apply in a typesetting project:

And here’s how I went about creating one of them. First of all, here’s how the “z” and “a” would normally sit next to each other:

I could have kerned the pair so that they overlapped in an aesthetically pleasing fashion, but the responsible thing to do was to create a “z-a” ligature. Step 1, create a blank glyph, and copy the “z” and the “a” into it:

Step 2, cut the outlines so that they can be joined in the appropriate place:

Step 3, remove the excess:

Step 4, move the glyphs closer together:

Step 5, connect the dots:

Intelligent Ligatures

One thing that didn’t make it into my first release of Joules is intelligent ligatures: a technology that I just recently learned how to create. (It means the end of TrueType fonts as we know them, as making intelligent ligatures requires you to use OpenType font technology.) I’ll spare you the details here, but it involves opening up a special OpenType panel in FontLab, and basically doing some scripting to make the ligature glyphs you’ve created come alive in ligature-aware software. It looks a little something like this:

Etcetera

Here’s the result, after all the tweaking and kerning:

I went on to make an italic version (really more of an oblique version, for you purists out there), and then bold, bold italic, and black. If anyone’s interested, I could detail some of what went into that process.

[Alec Julien is a web developer and amateur typographer living in Vermont, US. He dreams of someday living somewhere warm, and typesetting a novel.]

make a font type design