Haiku Monkey

Taken from my friend Erin’s awesome handwriting, here is Zurdo:

Just spotted a lovely new logo by Andreas Beijer that uses my Designation font.

Nice!

In my misspent youth, I dabbled in graffiti, and it turns out that despite the whole vandalism thing (a line which let’s just say for the sake of argument I never crossed) it was the best typographic education I ever had that I never realized I had. The unlikeliest things can be the most educational in the long term, and sometimes one’s path through the fabled 10,000 hours towards expertise takes unexpected detours.

What Graffiti Taught Me About Ligatures

What is a ligature? You can get a quick refresher on the subject over at ilovetypography.com, but basically a ligature is two letterforms joined together to create a single form.

There are really two types of ligatures in fonts: standard, and discretionary. An example of a standard ligature is the “f-i” pairing. In many fonts, the dot of the “i” trespasses dangerously close to the top of the “f”, impedes readability, and is just generally aesthetically unappealing. So font designers often create a single combined “f-i” glyph that sits in for the “f-i” pair of glyphs (when you’re using software that’s smart enough to make the proper substitution) — and generally, the “f-i” standard ligature drops the dot of the “i” and moves the base of the “i” under the protective hood of the “f”.

A discretionary ligature is a combined set of glyphs that is not strictly necessary, but is aesthetically interesting. A usual suspect in professional fonts is the “s-t” ligature. As you can see from the above graphic, there is nothing inherent in the geometry of the “s-t” combination that screams out “create a ligature here! shapes are crashing into one another!”, but there is a neat way to connect the two letters that adds visual interest and gives a unique flavor to the font that can be used in special circumstances. Generally, the wisdom is that you’ll always use a standard ligature when typesetting a document, but you’ll only occasionally use a discretionary ligature, as something that adds spice to your typography here and there. (Using the “s-t” ligature everywhere in a dense block of text would probably be quite distracting to the reader; but using it in one place on a, say, wedding invitation might add flare and uniqueness.)

Standard Ligatures in Graffiti

Graffiti taught me (without the proper terminology, of course) the difference between standard and discretionary ligatures, by way of lessons in geometry and flair. Standard ligatures are creations of geometrical necessity; discretionary ligatures are creations of artistic flair.

Here’s a standard (geometrically necessary) ligature in a lovely piece spelling out the word “SHOCK”:

The way the letters are spaced in this work, there’s no way the “C” and the “K” aren’t going to run into each other. So as a designer, it’d be irresponsible not to make sure this connection goes smoothly. Here’s what it might have looked like spacing the “C” and the “K” so that there’s no connection at all between them:

We can bring the letters closer together with the help of negative spacing, and still leave them unconnected. Here’s what that might look like:

Clearly, these two renditions (even as hackneyed and hypothetical as they are) don’t hold a candle to the original typography of the piece. The “C-K” ligature here is necessary to the integrity of the design.

Discretionary Ligatures in Graffiti

Discretionary ligatures, remember, are connections between letters that are not necessitated by geometry. Here is a wonderful discretionary ligature of the “A-U” combination of a piece that spells out the word “AUSTIN”:

There’s no immediate design consideration that says “you had better connect the crossbar of that ‘A’ to that ‘U’!”. But it is a lovely choice, above and beyond necessity’s demands.

More and more commercial fonts are coming with sets of standard and discretionary ligatures. Here are some of my favorite discretionary ligatures from recent font releases. Note the connections (top to bottom) from the “e” to the “l”, the “d” to the “e”, and the “d” to the “i”. Each one is geometrically unnecessary, but aesthetically amazing.

Coming soon: Part 2 of the series: “What Graffiti Taught Me About Kerning”.

Slowly, surely,…

I’ve uploaded two kits for @font-face web font embedding, for each of my open source families: Lavoisier and Designation. Thanks to Font Squirrel for their font kit generator!

Now to start thinking about opening up my commercial fonts for web embedding…

The Art of Bold

I remember thinking, way back when, that word processing software was amazing in the way it created bold versions of fonts whenever you typed ctrl-b. So naive. Of course, bold fonts are carefully crafted by font designers, not generated by some sub-par WordPerfect algorithm.

But why should bold fonts be generated by designers and not via an algorithm? Let’s take a look at the “H” from Helvetica:

The glyph on the left is Helvetica. The glyph in the middle is what happens when you take Helvetica’s “H” and apply FontLab’s bold algorithm to it. The glyph on the right is Helvetica Bold. The two bold glyphs have the same stem widths (the vertical bars). But note the difference between the horizontal crossbars: the genuine bold glyph has a thinner crossbar than the algorithmically generated glyph.

I don’t know the secrets behind FontLab’s bold algorithm, but I think I can venture a guess. The algorithm takes the original glyph and uniformly inflates it, both vertically and horizontally. In the case of a very uniform sans serif like Helvetica, this algorithm generates something different but not vastly different from what the designer of Helvetica Bold produced. But look what happens in the case of a classic serif face like Minion:

Applying FontLab’s bold algorithm to Minion’s “E” gives us a drastically different glyph from the genuine Minion Bold “E”. The stem of each glyph is the same width, but Minion Bold’s horizontal bars are much thinner than FontLab’s pseudo-bold ones. I haven’t highlighed it on the graphic, but, obviously, the serifs from Minion Bold are also much skinnier than the psuedo-bold serifs.

We can see the same issue with Minion’s “O”:

A uniform inflating of the “O” gives us a very different glyph from Minion Bold’s “O” — Minion Bold features glyphs that have thicker vertical parts than horizontal parts, giving a delicate, interesting appearance missing from the pseudo-bold.

This is not at all a critique of FontLab’s bold algorithm, by the way. The algorithm is just a courtesy that generates a starting point from which font designers can tweak their bold faces. In fact, the uniform inflation of glyphs to make a bold face is a tried and true technique for some fonts. Take the case of the lovely Marydale as an instance:

Marydale’s bold “A” is essentially the same as its uniformly inflated pseudo-bold cousin.

Famous Serifs

I did a bit of numerical analysis on five of everybody’s favorite serif fonts, and came up with the following chart detailing how the stem widths and crossbar heights of “H” grow from regular to bold:

What does this mean? Well, the main thing to take away from this graphic is that these fonts hold true to the principle of boldness examined above: namely, that a bold glyph should be expanded from its regular cousin in a predominately horizontal fashion. The width of the stems in our “H”s grows significantly larger than the height of the crossbars, as we go from a regular font to a bold one.

Do you love this sort of typographical analysis? Get yourself Karen Cheng’s Designing Type, and check out the iLT article on vertical metrics.

Sometimes you need a big font to get across a big idea. Introducing Hunk:

So I saw this awesome neon sign, and it inspired this font.

There are hundreds of ligatures in the font, with glyphs joined at the serifs. Really makes a great display font.

My minor chord series continues with m13:

I took my recent release, m7, and made it big and blocky. I’m releasing it here for free. Use it, embed it, change it, do whatever you like; just don’t sell it or sell any modifications of it. Let me know if you make something cool with it!

Download the m11 family (regular and italic)

My new slab serif family, m7, is available now at MyFonts.com: