Font Creation Case Study: Joules

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

打造你自己的字体（III）实例研究：Joules

特写：

超级特写：我迫不及待想使用的一个大写A。

注意原稿位图中包含的粗糙杂点：

通常，我会把这些位图处理干净之后才导入Fontlab，但这次例外。下面是第一个步骤，将位图导入ScanFont：

在ScanFont中的一个特写：

我把这个新字符复制到FontLab中的正确位置。为了给你体验一下在FontLab中是如何进行调整的，下面放大显示了导入进来的粗糙的A。我选择了一个有问题的部分。

然后开始删去那些令人不快的节点：

在FontLab中调节字符的时候，我们必须在两种诱惑中做一个平衡：一方面要使得轮廓尽量的平滑，另一方面，又应该尽可能的留下一些粗糙的节点，以保留字体的趣味。我发觉，对书法字体而言，不应该平滑掉所有的粗糙节点，在某种程度上，那等于剥夺了它们书法的感觉。

这时候，如果你编辑这个A或者那个重音符，变化会立即的自动更新到那个合成的“A重音符”上。

下面就是改进后的留白设置在默认字距调整情况下的样子：

下面举一个实例说说我是如何创建这些连字的。首先，我们先来看看这个z和a原始的连排效果。

第二步，切开它们的轮廓，让它们能在合适的位置结合：

第三步，删除多余的部分：

第四步，移动字符让它们靠近：

第五步，连接节点：

智能连字

 
完成

我后来又接着给它做了一个意大利体的版本（好吧，其实更象是一个斜体，你们这些吹毛求疵的家伙），然后是一个粗体、粗意大利体，然后是大黑体。如果还有人感兴趣，我可以继续说说其中的细节。