Blog: #type-design

Cantilever update 16 Sep

I’ve finished the initial drafts for all the lowercase characters in Cantilever and I’ve started working on the uppercase:

Many characters are still missing — /B/, /H/, etc., as you can see — but it’s nice finally being able to use actual text (this is from George MacDonald’s The Princess and the Goblin).

What’s next: fixing the glyphs I’m still not happy with and fleshing out the rest of the uppercase. And then spacing and kerning! Then I can stop being bothered by the lack thereof.

Notes, in no particular order:

• I’ve decided that I’m designing for retina devices. Sure, it’s going to be several years before all desktops/laptops have retina screens, but man, it’s painful designing for lower PPIs. (So I’m doing most of my previewing on my iPhone.)
• My current process for each glyph is to draw an initial lame draft in FontForge, export and preview, contemplate giving up type design forevermore, and then tweak the glyph and preview and tweak and preview until I’m happy with it. It’s working out okay, even for evil glyphs like /s/ (my first draft was absolutely pathetic) and /g/ (which is still somewhat pathetic but not as bad as it used to be). And /a/ was also a beast for several drafts.
• I’m struggling with the uppercase. I’m going to look at some other fonts to see where I’m going wrong.
• I finally got FontForge to compile on OS X with Python, so I’m writing some scripts to automate things (such as an export script that removes overlap and copies output files where I want them).
• FontForge isn’t quite as bad as I originally thought it was. And the recent versions have user-customizable hotkeys.

Cantilever WIP

A couple weeks ago I started on a new typeface I’m calling Cantilever. Originally I thought I would sketch out the characters on paper and trace them, like I did with Pigna, but I’ve ended up just drawing everything so far directly in FontForge. The initial few characters:

Funny how characters can look semi-okay at large sizes but then not at all at text sizes. I went through several iterations to get something I actually liked:

Since I’m intending this for use as a web font, I ended up writing a small JavaScript/HTML app to let me preview my work in-browser, both on desktop and on mobile. It lets me switch between different versions (so I can see if I’m making progress) and also different text blocks. (And of course I can tweak the size and line-height.)

And here’s where Cantilever is right now (version 008):

There’s still a lot to do (fleshing out the rest of the characters, spacing and kerning, etc.), but overall I’m happy with the direction it’s going.

Thoughts on font editor design

As I start getting more into designing type, I’m finding that I’m not as happy with FontForge. It works, yes, and I can design fonts with it, but it’s not beautiful, aesthetically or functionally. It doesn’t sing. It also has a lot of friction that slows me down. I’ve looked at the other font editors out there — FontLab, RoboFont, Glyphs — and they don’t really do it for me either. (Nor are they in my budget at the moment.)

I realized I’ve been spoiled by Vim and Blender, both of which have steep(ish) learning curves but which also are incredibly rewarding and efficient for power users. I want that kind of a tool to use when designing type. So, because this is me, I’m going to build one.

Well, sort of. I’m going to talk through the design out loud on here as I go along, occasionally building prototypes to better explain what I’m getting at. I’m sure at some point I’ll actually build it, since I already want to use it instead of FontForge, but for now I need more experience building type with existing tools so I can better know where the friction points are.

I’m calling it Curves, and yes, it’s partly tongue-in-cheek. Here’s a brief overview of some of the ideas behind it (some of which are already in existing font editors):

• Power tool for advanced users. Reading about Douglas Englebart’s philosophy on computing has gotten me itching to make power tools instead of newbie tools. There’s nothing wrong with newbies, but I’m more intrigued by the idea of focusing on power users. Learning curves are okay. (Weak pun semi-intended.)
• Web-based. Originally I wanted to make this a desktop app like Vim or Blender, but the more I looked into it, the less interested I got (C/C++ no longer appeal to me, and doing the UI in OpenGL to be cross-platform would put me at a lower level than I’d like, since I didn’t really like any of the OpenGL UI toolkits I looked at). Besides, all my recent experience is in web stuff, and being able to edit fonts from anywhere will be nice. (I think seeing Tridiv yesterday helped cement this decision for me, by the way.) Also, since web fonts are one of the main targets of an app like this, being able to load and preview the fonts in-browser will be a big plus. And web services have a lot of potential.
• Panes. I really, really love Blender’s windowing system, with non-overlapping panes. (Vim has something similar, though I don’t really use it that much.) I also love being able to easily store different layouts for different uses. With type design, this kind of setup feels like the right choice and would make it so much easier to switch between different parts of making type (designing glyphs, spacing/kerning, previewing text, OpenType features, etc.).
• Heavily keyboard driven. I’m thinking about possibly using chording and/or sequences (the latter ala Gmail, thanks to Mousetrap). Everything customizable, of course. At this point I’m thinking of borrowing Blender’s shortcuts for selecting (‘a’), moving (‘g’), scaling (‘s’), and rotating (‘r’) points, since they’re all on the left hand, which frees your right hand for the mouse. But we’ll see.
• Command line. I don’t mean running it from the Unix command line, but rather that I want a command line as an integral part of the app. Command lines are really, really powerful, and the idea of one specifically tuned for designing type makes me giddy.
• Search. Not just searching for glyphs by name, but a powerful query syntax so I can easily get a list of glyphs wider than X or with left sidebearings smaller than Y or what have you. And saved searches, of course, like smart playlists in iTunes.
• Scripting. Of course. Python or JavaScript. I’m looking forward to being able to generate kerning pairs via Python rather than having to do that outside of the app and paste the resulting pairs in. Or being able to script a set of things to do just before exporting to OTF (like removing overlap and checking for points at extrema and stuff).
• Focus on designing text faces for use as body copy. I’m still not sure what that actually means in practice, but some ideas are: previewing pages of text instead of just lines; editing and previewing the italic and bold weights together with the regular (rather than as separate fonts); programmatic relationships between regular and italic and such; visually edited components that can hook together intelligently and automatically remove overlap on export.
• UFO. No, not flying saucers. The Unified Font Object format is a nice XML-based schema that already has support in most existing editors and feels like a good platform to build on. (Besides, RoboFab can already read and write it.)
• Great OpenType feature support. One of my beefs with FontForge is that I have to use its UI for OpenType features. I’d much rather use Adobe’s text-based feature file format. Yes, FontForge can import/export it, but it’s not FF’s native way to edit OpenType, and I wish it were. (I, uh, like text.)
• DSL for editing glyph points. Visually drawing glyphs is nice, but I want to have a text editor pane beneath my glyph with code for that glyph that I can edit. (Text can be nicer for precision editing.) This would probably be a small domain-specific language. I’ve also thought about integrating it more completely — a fully-fleshed out parametric type design language, kind of like Metapost. The trick would be finding the sweet spot between writing parametric code and designing visually. I have some ideas for this that I’m excited to explore.

There’s more (I’m very interested in finding ways to improve the UI for drawing Bézier curves), but that’s quite enough for now.

Pigna: tracing finished

Finished tracing all the characters today. (Remember, this is a throwaway font for learning purposes only, and I’m not releasing it when I’m done. I’ll do real typefaces after this.)

Whew. In spite of knowing this is a throwaway font, it still makes me giddy to see all the characters come to life like this. Two unexpected side effects from tracing: repetitive stress pain (mostly from adjusting control points) and now I mentally trace Bézier curves over everything I see in real life.

Spacing and kerning

I started doing spacing, using the ‘n’ and ‘o’ characters for lowercase and ‘H’ and ‘O’ for uppercase:

With the lines in between, it’s a little harder to tell if I’m spacing things well. I need to see if I can tweak the FontForge theme to make the lines a lot lighter. I also need to take the exported font and do these spacing strings, both on screen and in print, which will help.

I got a little ahead of myself and started doing kerning, too:

I did ‘T‘ (‘Ta’, ‘Tb’, ‘Tc’, etc.) and ‘f‘. When I do a real font I’ll use kerning classes to start, since it saves a ton of time, but for this font I wanted to do it manually. I suspect I’ve kerned a lot of these pairs too tightly.

More test sheets

Now that I have a complete character set, I put together another test sheet, this time using text from LibreText:

And a Tom Sawyer test sheet, since almost all of my interest in type design is in designing typefaces for books (though I would never use a font like this for body copy in a book):

When I made this sheet, I realized I don’t have a complete character set yet. I still need an em dash, an en dash, and curly quotes (single and double). And I think I’ll add oldstyle numerals as well.

Ligatures

I learned how to make ligatures like ‘fi’ and ‘ffi’, which you can see in a few places in the first test sheet. Here’s the process:

1. Go to the glyph for the ligature. (Click View->Goto and type in the name of the ligature, f_i in this case.)
2. Rename the glyph. (In the glyph window, click Element->Glyph Info and change the name to f_i — you can do it without the underscore, but Adobe’s standard is to use it, so I’m going to. Double-click on the glyph to open a window for it.)
3. Import the component parts. (Click Element->Build->Build Composite Glyph. The component parts are ‘f’ and ‘i’.)
4. Move the glyphs where you want them.
5. Turn the imported glyphs into live paths. (Click Edit->Unlink Reference.)
6. Adjust the glyphs as necessary — joining paths, adding points at extrema, removing overlap, etc. Change the right bearing, too, to be whatever the right bearing is for the last component character in the ligature (‘i’ in this case).
7. Create a lookup table. (This only needs to be done once. For future ligatures, open this lookup table and skip to step 8.)
   1. Click Element->Font Info and, in the Lookups pane, click the Add Lookup button.
   2. In the Type dropdown at the top, choose Ligature Substitution.
   3. Under Feature in the table, type liga or choose Standard Ligatures. The script/language defaults are fine. Click OK.
8. Add a subtable. (Click Add Subtable and click OK for the default name.)
9. Link the ligated glyph to the input characters that trigger it. (In the subtable dialog, put f_i under Ligature Glyph Name and f i under Source Glyph Names. Click OK.)

In the metrics window, you can test it. If it’s not working, you may need to activate the liga feature in the list at the left of the window. Voila! Ligatures. Mmm.

Oh, I also threw together a new dummy font file and learned how to do contextual chain substitutions and other cool OpenType stuff. (Specifically, I hooked it up so if I have two ‘o’ characters in a row, the second one gets replaced with an alternate ‘o’.)

It’s official: I’m hooked. Type design is really, really addicting.

Pigna: tracing, part 2

Traced sixteen more characters today (esmb-urgtfvclz~^, in that order). It’s going quite well.

I did run into two hiccups, though. First, when I traced the ‘g’, I realized the descender went way past the descender line:

It took a bit of finagling to figure out how to get this the way I wanted it (including opening some other fonts to see how they did it). Basically, in Element->Font Info, I turned Scale Outlines off, then set Descent to be close to the descender on the ‘g’. I also set Ascent to be just above the top of the ‘b’ and ‘d’. I hit OK, then went back and (with Scale Outlines on) changed the Em Size back to 1000, which is apparently where it’s supposed to be.

Second, I initially had the top of the ‘t’ at the x-height, which ended up being way too short. The bar is supposed to be at or near the x-height. Scaling the glyph up easily fixed it.

In spite of the fact that I didn’t do any spacing adjustments on these new characters, I threw together a test sheet (again using adhesiontext). The image is linked to the PDF:

I shouldn’t have any problem finishing the tracing up in a few more days. Then I’ll do general spacing, followed by kerning (the lack of kerning on the ‘f’ is bothering me, as it should). But we’ll get there when we get there.

Pigna: tracing

I’ve traced ‘a’, ‘d’, ‘i’, ‘o’, ‘n’, and ‘h’ so far, in that order. (The two common starter strings I’ve seen are “adhesion”, which I’m doing, and “hamburgesfontiv”.) It’s already addicting and I don’t want to stop.

My process on these:

1. Double-click on the glyph in FontForge (in the main font window).
2. In the glyph window, click File->Import and choose the sketch for the background layer.
3. Select the background layer and resize the background image so that it rests on the baseline and matches the x-height. (Before I started, I made a guide for the x-height.)
4. Select the foreground layer.
5. Make sure View->Show->Fill is not selected. (If it is, the glyph covers up the background image, making tracing impossible.)
6. Switch to the pen tool (‘p’).
7. At a zoomed-out level where I can see the whole glyph, place initial points. I place them at the extrema, since that’s apparently what’s best for fonts. (One thing that helps a lot with this is selecting View->Show->Extrema, so I can see if I’ve gotten it wrong.)
8. Then I zoom in close, switch to the pointer tool (‘v’), and finesse the points and control points till the curve matches the background image.
9. Zoom out, hide the background layer, turn on View->Show->Fill, and see how the glyph looks. Adjust as necessary.

After I did a few, I opened the metrics window (Window->New Metrics Window) and typed the characters in (I got them from adhesiontext, though LibreText is also good), then tweaked the bearings (dragging the lines, but editing the LBearing and RBearing boxes also works) until it looked a little better.

The hardest thing so far? Resisting the urge to try to make these font outlines look good. It’s. So. Hard.

General notes

• I should mention that a few months ago I read Design with FontForge. It’s a good starting point.
• Somewhere I read that you only want to use horizontal/vertical control points. For the most part I’ve been able to do that, and it feels cleaner, but some curves just don’t seem to be possible that way. Maybe you’re supposed to use more points in those cases? Not sure. I’ve opted to allow some exceptions where necessary.
• I initially wasn’t sure how wide the left and right bearings should be, but as I’ve started spacing things, I’m getting a better feel for it. The metrics window alone isn’t enough, though, since the lines get in the way — pretty soon I’ll do a pageful of dummy text in different point sizes and see where the spacing is off.
• For curved parts (like the top of the ‘n’ and the top and bottom of the ‘o’), you want to optically adjust by making them extend past the x-height/baseline, so I’ve added guides for that. I’m not entirely sure how much bigger the adjustments ought to be, but I trust that’ll come with iteration down the line. (Though for this font, I’m not doing that.)

FontForge notes

• Yes, FontForge is an ugly app. I’m still not sure where it sits on the spectrum between the UI being horrible and the learning curve being really high (like with Vim).
• I originally had labels showing on the guides, but they disappeared and I haven’t yet figured out how to get them back.
• It’d be nice to make the glyph semi-transparent so I can see the glyph shape (not just the outline) and the background image at the same time. So far I haven’t figured out if this is possible.
• I wasn’t sure how to take a point with only one control point and get a second control point out of it. This may not be the best way, but I control-clicked on the point, went to Get Info, and then edited the second control point’s coordinates directly so it wasn’t 0,0. And then I could drag it in the glyph window.
• A keyboard shortcut to toggle the fill (and just the fill) would be nice. In fact, customizable keyboard shortcuts that don’t involve editing a gettext .pot file would be nice. Someday, hopefully…
• I haven’t yet found a way to scale the background image proportionally (you’d think Shift would work, but it doesn’t, at least not consistently).
• When I double-click on a glyph to open it, I wish FontForge wouldn’t switch to the pen tool. The pointer tool is what I want most of the time. Maybe there’s a setting somewhere?

Pigna: font in a month

I’ve been trying for a while to get myself to start doing type design, but I rarely get past the sketching stage. Since these “do x in a month” goals seem to work for me, here’s the plan:

By August 31, I will design a typeface using FontForge, and I’ll blog about the process as I go. (I’m starting today, which technically makes it a little more than a month, but I don’t want to have to remember which day of the month I started this.)

With this font, my aim is to learn the production aspects of type design (by which I mean everything but the outlines). I’m not going to make the outlines look good or harmonize with each other. That pains me a little, but I don’t want to get distracted. This is a throwaway font for learning purposes only. Beautiful fonts will come later (hopefully).

The font will be called Pigna — after the Fontana della Pigna in Rome — and will have these characters in it:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
`~!@#$%^&*()-=_+[]{}|;:'",./<>?

I started today by sketching out the characters on graph paper and scanning them:

I marked the individual sketches I want to use with green dots underneath the character. (I ended up deciding to use the first 1 instead of the one I marked, though. And I’m planning to use the semicolon components to make the colon and the comma, so I didn’t mark those separately.)

After that, I split each character out into its own file (a.jpg, b.jpg, 5.jpg, hyphen.jpg, octothorpe.jpg, etc.) by copying and pasting in Photoshop.

Next up I’ll import them into FontForge as background layers and trace the outlines on top of them. When I start doing real font production later on, I think I’ll make sure to set up baselines and grids and things so that the images are all the right size and position. (With these, they’re all different sizes, so I’ll have to move them around by hand once they’re in FontForge.) I’m also thinking that Typlate would be more useful to me if it could do several smaller rows, like in the sketches above — at least at this point, I don’t see myself using a whole piece of paper for a single character or two.

Typlate

I’m starting to get more into typeface design, and so I put together a little web app to generate PDF templates for sketching type out (with guides for the ascender, baseline, x-height, etc.). It’s called Typlate:

You twiddle with the numbers till you get proportions you like, then print out the PDF and start drawing:

Technical note: I’m using jsPDF to generate the PDF in-browser. In fact, there’s no server-side code at all. It’s amazing what you can do with JavaScript these days.