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:
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.]
— Hochuli & Kinross
Simon Pascal Klein
These articles are great, though I would love to see a similar one that utilizes another tool chain (ie. pen n’ paper, scanner, GIMP, FontForge or some-such).
If not, don’t worry. Thanks very much as always for the lovely read. (o:
Nov 29, 2007
LaurenMarie - Creative Curio
Very cool, Alec! I enjoyed this look into how you make your fonts. (I love the way you do your lowercase a, by the way). All the pictures were a great visual representation of the process. So you didn’t say how long it takes you to create these! I’m interested in the bold, bold italic and black process. Do share!
(oh and thanks for the mention!)
Nov 29, 2007
johno (iLT)
I’d like to see more about the process too. It’s always fascinating to see how different minds approach tasks in their own way.
Nov 29, 2007
Esben Thomsen
I don’t like the bitmap output, whats the deal with previewing in bitmap?
But what a great article Alec it really made me see the workflow that goes into such a ordeal to design a type.
Nov 29, 2007
Mookster
Fascinating insight, thanks Alec
Nov 29, 2007
Cody
Nice one Alec! For me this is even more informative than the previous two posts combined. Certainly a great step by step study. I had no idea that there were intelligent ligs in FontLab (then again, I don’t really play around much in it). Great article and definitely going to help a lot of people out in their font journey.
Nov 29, 2007
typehigh.nl
Hey, I was just wondering; when you create the ligatures, why don’t you use the ‘Merge Contours’ command, instead of manually cutting open the shape and connecting the nodes? That way you could just overlap the two shapes the way you want, and hit Merge.
Just a thought, keep it up.
Nov 29, 2007
Adam Harvey
Wow, what a helpful article. Thank you.
Nov 29, 2007
Alec
@Simon — I’d love to see an article on FontForge, too. I’d write one if I knew anything about it!
@Lauren — I probably should’ve kept track of how long the whole process took me here. It generally takes me about a week of semi-focused time to take a font from sketch to finish. Sometimes longer, if the kerning and ligatures are complicated.
@Esben — Bitmap is the only format ScanFont can deal with, sadly.
@Mookster — Thanks!
@typehigh — I often do use the ‘Merge Contours’ command, but sometimes it’s not practical. (Though it certainly would’ve been practical in the ‘z-a’ ligature case!) Anyhow, the cutting method is more dramatic, and I’m a sucker for drama.
@Adam — Thanks!
Nov 29, 2007
Corey Dutson
Wow, this is hardcore. It’s a nice looking font set, and a great walk through to compliment your other articles.
Nov 29, 2007
typehigh.nl
@Alec — A sucker for drama; fair enough! ;)
Nov 29, 2007
Esben Thomsen
Alec @
Finally I did understand what sidebearings means, I do remember that the wiki article dont reflect that, so perhaps you should put it on your todo :-)
Nov 29, 2007
Justin
Ooooer.
I f*ing love I Love Typography. Some books are going to get bumped down the old wish-list to make room for FontLab. :)
Nov 29, 2007
Chris
Alec: I’ve taught a digital type design class at my college for over 15 years, using Fontographer and then TypeTool (an affordable version of FontLab). You’ve done a masterful job of explaining and documenting the process. Thanks for providing another source of information for designers. Students learn so much more when having to examine and create letter forms at the micro level. Bravo!
Nov 29, 2007
LaurenMarie - Creative Curio
Off topic: Johno, why did the subscriber count go away? I love seeing how successful iLT is! I can’t believe you’re up well over 7,000 in just three months. It’s pretty incredible :D
Nov 29, 2007
Hamish M
Another great article Alec!
I’d love to try out FontLab sometime — I’ll have to grab the trial.
What version are you using?
Also, I see that FontLab supports macros (powered by my favorite programming language, Python), have you ever used this feature for any of your projects?
Nov 29, 2007
diane zerr
Wow! This is a great post on the process that goes into creating fonts. I am a huge admirer of type and to see how they are created is a bonus!
Your posts are so informative and interesting!!! Thanks!
Nov 29, 2007
Alec
@Justin — Me too!
@Chris — That’s awesome. Thanks so much!
@Hamish — I’ve never delved into Python in FontLab, though I have run across some interesting info… Let’s see… (Going to my bookmarks now…) Ah, yes, you might want to check here and here. If you ever get into this, I’d love to hear what you come up with.
@Dianne — Thanks!
Nov 29, 2007
paul dean
What a great article. So lucid. So directly to the point. So brief! This article is homework for my type students now.
Nov 29, 2007
paul dean
What a great article. So lucid. So directly to the point. So brief! And a thousand new fonts are born… .
Nov 29, 2007
leah
Yes, well done Alec! I’m completely new to typography, so everything is a new experience. Up until now (the past few weeks) I haven’t really seen much about how fonts are made, so this was fun. And oddly enough, Step 2 of creating a ligature reminded me of Biology class, learning about nerve impulses. Just thought I’d mention that. : )
Nov 29, 2007
johno (iLT)
Lauren
I’m never quite sure whether I should include the feed count. I must admit to always being surprised by the numbers that subscribe to iLT—surprised in a very nice way, of course.
Alec
Great article! You’re part of the furniture now.
Leah
Only you could make the link between type design and biology ;) I guess ligatures could be likened to dendrites (those little bits that extend from neurons).
Nov 29, 2007
CJ
I’d also like to see how you make the variant font styles.
Nov 30, 2007
Chris Papadopoulos
Alec this was fascinating once again. The part about kerning and ligatures is particularly interesting as that reiterates a few concepts that John previously discussed. As somebody who never got a formal graphic design education but is now just really learning about type, this stuff is always interesting and appreciated.
Nov 30, 2007
Robert
Thanks for sharing the whole thought process Alec. I really didn’t realize how much work goes into it. :) Good Stuff!
Nov 30, 2007
Alec
I’m tickled that my little article is useful to some of you!
Nov 30, 2007
johno (iLT)
Oops, I just hit “publish” instead of “save” and accidentally published half of a draft post. Apologies to anyone who has received that “half-a-draft-post” in their reader.
Johno
Nov 30, 2007
C.C.
I love your site and I think it is a great asset to the typographic community—-
however, you should really do some research on lettering and calligraphy and take some classes or workshops before you try this again! Not that your efforts were bad, at all, you did a great job! It’s just that you are in a position to educate designers and typographers about the extensive, exciting world of contemporary calligraphy and hand lettering out there.
There are many Western calligraphy experts as well as amateurs in Japan. Contact the ABC Calligraphy guild.
Check out http://www.alphabytes.com by Rob Leuschke: type designer and lettering master!
Nov 30, 2007
johno (iLT)
CC
Thanks for the link. However, the typeface used in the article is a ‘handwriting’ type, not a calligraphic script per se. Also, the aim of the case study is to teach the process of font creation, rather than to teach calligraphy, which really is outside the scope of this typography blog.
The link to an enlarged view of your Fuzzy Bubbles Bold is broken, BTW.
Nov 30, 2007
Leah
John—
Yeah, there’s something to that. I don’t know exactly how much they have in common, but the little nubs touching and joining reminded me of those old diagrams of two nerve cells and the synaptic cleft.
I’m willing to bet there are links between typography and nearly every subject out there, depending on how willing one is to follow a (perhaps shaky) segue.
Nov 30, 2007
Alec
@CC — I was just using a calligraphic pen, not trying to make a calligraphic font.
Nov 30, 2007
James Elsey
I love the font. I tried using calligraphy and indian ink to produce an urban looking typeface. Email me if you would like to see a copy. Love reading the site by the way, I am a student studying graphic design and typography. My website is http://www.elseycreate.co.uk
Nov 30, 2007
Gordon Bergin
Great article and great font! This is something I definelty want to try and do although it does look a little complicated for me.
Dec 1, 2007
Alec
@James — I’d love to see your typeface. Couldn’t find an e-mail address for you on your site. Mine’s here if you want to get in touch: http://alecjulien.com/?page_id=7
@Gordon — Thanks! There is a steep learning curve to some of this stuff, but it’s definitely doable if you take things in stride. Good luck!
Dec 1, 2007
Roger Gordon
Wow, I’m a complete type novice and this article was SO interesting. I’d always wondered how to create a font and thought that it was some kind of black magic that only a select few possessed. Well, now I know that the process is rather straight forward, and I might be tempted to do it one day. I’m pretty convinced though, that doing it properly and beautifully is where the wizardry lies…
Thanks for opening up a whole new world to me!
Dec 1, 2007
Roger Gordon
P.S.
ilovetypography is one of the highest-quality blogs that I’ve ever had the pleasure of discovering. Each and every article is well thought out, excellently written and accompanied with top notch illustrations. It’s a very professional and elegant site overall. For me, ilt is like an alistapart for typography (but I think it looks better then alistapart)
All the best!
Dec 1, 2007
Stephen Tiano
Having had my interest in designing a typeface thrown off by a rush of design and layout work I’ve never had before this late in the year, I was pleased to be reminded that I still had the interest. Keep this sort of article coming, Alec, perhaps with—my personal interest—a similar article focused on a straight serif text type, the kind one might use in a book project.
Dec 2, 2007
nomes
Great presentation of the process. Love it.
Dec 2, 2007
Alec
@Roger — You’re exactly right about the magic being in the aesthetics, not in the process. Someday I hope to do something (anything!) properly and beautifully!
@Steve — If I ever manage to create a decent serif book font, I’ll definitely document the process and ask Johno if I can blog about it here. But it might be a loooong time before I manage anything decent along those lines!
@nomes — Thanks!
Dec 3, 2007
James Elsey
@ Alec - in response to your comment reply.
Here is my Urban typeface: http://img503.imageshack.us/img503/9671/urbanyn0.jpg
info@elseycreate.co.uk for feedback.
Dec 7, 2007
Gustavo
absolutely gorgeous work and font…
your blog is amazing and I’m a new, but huge, fan of it!!
Dec 8, 2007
Alec
@Gustavo — Thanks for the kind words about the font! The blog is all Johno’s — I’m just a thankful contributor here. Anyhow, I enjoyed browsing through your Flickr collection. Good luck launching your website!
Dec 9, 2007
Hussein
Hi (font lab study case)
my name is hussein working as Arabic sinour graphic desinger,
i’m creating the letters for the arabic fonts ready to put them in the font.
Now the major problem yes which is that i can’t use this program I have it but i don’t know how to use it, what i’m trying to say (i need help to study it in a right way to do my arabic fonts i need a guide to know how to use this program. if there a way by Video or anyway else.
Please i need a help to do my arabic creativety as a font and creating it as reall font.
I’m living in United Arab Emirates (dubai).
please inform if i can study it .
Many thanks
Hussein
Jan 3, 2008
johno (iLT)
Hussein
I don’t know of any course close to you. Perhaps someone else here knows?
There’s an Arabic Typography group on Facebook. Perhaps someone there will know of local courses; or perhaps there’s a type designer close by who’d offer you lessons.
Let me know how you get on.
Jan 3, 2008
johno (iLT)
Hussein
I just found an interesting link, Generating Arabic Fonts.
I hope it’s of use. You could also try asking your questions on that blog—looks like an excellent resource for Arablc Typography. Let me know how you get on.
Jan 4, 2008
Sam
Amazing. There aren’t enough articles out there like this.
“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.”
—Very funny
Feb 22, 2008
Alec
Hehehe! Thanks, Sam.
Feb 22, 2008
Guz
Man, I’m VERY interested in knowing more about the other processes to make the italic fonts, bold, etc.
Please, post it here!
Excellent tutorial, I really enjoyed reading it!
Apr 11, 2008