Font Creation Case Study: Joules

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:

Joules initial drawing

And a closeup:

Joules initial drawing, closeup

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

Joules A closeup

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.

Joules A black-and-white

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

Joules A rough spots

Joules A black-and-white rough spots

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:

Initial pass in ScanFont

And the ScanFont closeup:

A in ScanFont

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:

Closeup in FontLab

And started the tweaking by deleting some offensive nodes:

Closeup in FontLab

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”:

A plus Grave

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

A plus Grave double click

…and FontLab creates a composite glyph:

A plus Grave composite

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


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:

y sidebearings

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

a-y sidebearings with kerning

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”:

y negative sidebearings

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

a-y negative sidebearings with 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:

A V pre kerning

And after kerning:

A V post kerning


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

Joules ligatures

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:

z and a

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:

z and a, pre-ligature

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

z and a, pre-ligature...

Step 3, remove the excess:

z and a, pre-ligature...

Step 4, move the glyphs closer together:

z and a, pre-ligature...

Step 5, connect the dots:

z and a ligature

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:

Ligature definitions


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.]

previous: Sunday Type: Crap Type

next: Sunday Type: Freudian Type

Typeface Categories

learn greek type desgin
learn greek type desgin
font deals of the week
fonts on tape