Notes

September’s Font of the Month: Input Cipher

The “font” vs “typeface” distinction has never been one that I’ve particularly cared about. I tend to use the words more-or-less interchangeably, and whether you are talking about an OTF font file or the designs of letterforms, I can always tell what you mean.

If we’re going to split typographic hairs, the distinction between “characters” and “glyphs” is far more interesting to me. By “characters” I mean the abstract symbols that get encoded into our documents (the concept of the letter A), and by “glyphs” I mean the specific drawings that represent those symbols (a particular rendition of the letter A in a particular font).

I don’t mean to get into a whole semiotics discussion here, but I think it’s useful to look at the typography we do as a veil draped over the underlying sequence of characters that make up our documents. In the Latin script, a lot of the time that veil is essentially transparent—you type an A, you see an A. But in other writing systems, and even in advanced Latin typesetting, the character/glyph relationship can become more important and more complex—think of ligatures, where multiple characters are represented by a single glyph, or OpenType alternates, where multiple glyphs can represent the same character.

A font is essentially a database that maps the characters that we type to the glyphs that we see. And this month I am sending you Input Cipher, a font that highlights the glyph/character relationship by completely destroying it.

Input Cipher is the typographic equivalent of the decoder ring that your childhood self might have found inside a cereal box. You can type out a message in the font, and then use a variable axis to “encrypt” the text using a handful of common substitution ciphers like ROT13, where the basic Latin alphabet is rotated 13 letters so that A becomes N, B becomes O, C becomes P, etc.

I put “encrypt” in quotes because your message is not actually getting encrypted: the glyphs you see will change, but the underlying characters you typed stay exactly the same. Try using a screen reader or copying some ciphertext and pasting it elsewhere—the original message is untouched! (A screenshot will capture it, though. 😉)

The cipher axes rotate through A-Z (Caesar’s cipher, including ROT13), the ASCII character set (including ROT47), and 0-9 (including ROT5). In addition, you can map A-Z to its reverse (Atbash), redact the text completely, and use the Decode axis to gradually reveal the original message. There are also bonus OpenType features that can read and write Morse code, which you can type with dots and dashes, like this: .... . .-.. .-.. ---

I’m no cryptography expert, but even I know that these ciphers are of little cryptographic value—it would be easy for someone to crack these codes by tracking double letters, letter-frequency, and other codebreaking techniques.

But data security is not really the point of this font. The point is to have fun! Send secret messages to your friends…or your enemies. Decrypt messages from others by trying to locate the inverse axis positions. Use the Decode axis to quickly scramble and reveal your text in animations or interactive media. Or, just bask in the cognitive dissonance that comes with typing a letter ands seeing an entirely different one appear.

This isn’t the first font to encode ciphertext, nor is it unique in offering obfuscation and redaction (I love LTR NCND’s typewriter-y take). But I don’t know of many fonts that apply glyph substitution so extensively across variable axes. With over 11,000 letter substitutions occurring in rapid succession, Input Cipher turned out to be an interesting test case of where we are with variable font support at the moment. Web browsers, Photoshop and Figma seem to do fine with these axes, at least on my computer. InDesign does nothing, and Illustrator just crashes. 😂 So what I’m trying to say is…your mileage may vary! 

I don’t love the idea of sending you a font that doesn’t work everywhere, but I think it’s also helpful to have publicly-available edge cases for app developers to test with. And even if you can’t use the font in your favorite app, I worked with Nick Noble on a browser-based demo page that you can use for all your encrypting needs! 

If all of this cipher nonsense isn’t for you, I hope you enjoy the sneak peek of Input Serif Mono, the newest member of the Input family of coding fonts. Omitted from Input’s original release of Sans, Serif, and (Sans) Mono in 2014, it’s the centerpiece of a long-overdue update that I’ve been working on with the help of Ruggero Magrì. Like its sans serif predecessor, Input Serif Mono sets itself apart by offering a series of widths in addition to the usual weights, giving you the power to control the proportions of the monospace grid.

August’s Font of the Month: Bild Poster

Last month I sent you The Rest of Bild, a name I now realize misleadingly implies some kind of happily-ever-after ending for the font. On the contrary, I consider Bild to be anything but finished, and this whole month I haven’t been able to shake the nagging feeling that something was still missing from the family.

Bild is a “what if” font: what if Trade Gothic was built around its Bold Condensed styles? By carrying that style across weight and width, it creates a bigger straight-sided Gothic sandbox for designers to play in. But at the same time, it’s not a very opinionated design—I wouldn’t call it generic, but it isn’t very specific either. It doesn’t tell you a lot about how it wants to be used, and perhaps doesn’t do enough to invite you to play in the sandbox it has created. Where are the swings? The slides? The monkey bars?

Type design involves so many details that it’s easy to forget that, when viewed at a distance, fonts essentially boil down to rhythm, density, and proportion. Bild’s width and weight variants give you lots of control over the rhythm and density pretty nicely. But the proportions…maybe there is still something there that could unlock expressive potential while keeping within the parameters of the original design. So this month, I’m sending you Bild Poster, which asks the question: Is Bild’s x-height its X-factor?

Bild now features a variable x-height axis (XHGT) that gives you the ability to dynamically raise the height of the lowercase letters. It’s a very simple transformation but one that radically alters the character of the design. It offers an edgier, Display-ier look that I hope can really sing in large poster use, following in the footsteps of other supertall x-height grots like Inserat-Grotesk, Anzeigen-Grotesk, and of course the ubiquitous Impact.

Bild is far from the first variable font to provide a variable axis for manipulating the x-height. CJ Dunn’s Dunbar, one of the earliest variable font releases, has an axis that took his Erbar-inspired geometric from the low-slung 1920s look to the almost-too-much ITC style of the 1960s and ’70s. There are also several parametric fonts out there that allow for manipulation of the x-height via with the YTLC axis. I also just discovered that newglyph’s Swiss Poster (released two days ago!) features a similar concept.

Bild’s lowercase doesn’t get wider as it gets taller, but it’s not quite parametric either. First, I made subtle reductions to the descender lengths to keep them from sticking out too much. Then I changed the kerning, especially in situations where lowercase could no longer tuck underneath other caps as the x-height grows, like the word “Tuck” shown above. It took a lot of trial and error to map these breakpoints across what is now a three-dimensional space (a perfect use case for Occupant Fonts’s helpful tool).

A taller x-height leaves less space for all stuff that appears above the letters: ascenders, accents, and the dots on i and j. I took special care to manage their alignment as you traverse the space, and added a special “Cap Snap” OpenType feature that will clip the tops and bottoms of the will shorten the ascenders to match the cap height, helpful when stacking lines of text with super-tight leading.

As I increased the x-height for Bild Poster, it dawned on me that elongating the letterforms to make them taller was just another way of elongating the letterforms to make them narrower. Since I was practically doing half the drawing already, I went ahead and added two new widths to the family (Skyline and Extra Compressed) as well.

Most supertall sans serifs can get very picket-fence-y, with long terminals on letters like s, c, and e that reach inward to enclose their whitespaces (two fonts of mine that do this are Fit and Nickel Gothic). Even at its narrowest extremes, Bild sets itself apart by truncating its terminals prematurely, leaving massive gaps that make the letters feel both closed and open at the same time (check out “Splices” above). This feature, along with the angular, asymmetrical arches on h, m, and n, prevents things from getting too clean and same-y, and preserves the feeling of Trade Gothic even as the proportions stray farther and farther from the source material.

Is an adjustable x-height actually worthwhile? Is this what the sans serifs of the future will offer, or is just a cheap gimmick? I don’t know but I figured it was worth an extra month of work on this to inject something unexpected into this otherwise-straightforward design. I hope you find some value in this addition to Bild, and I’m x-heighted to see what you do with it! (sorry)

July’s Font of the Month: The Rest of Bild

This July, I’ve been thinking a lot about the surprisingly large role that frustration plays in my design process. I got fed up with my lack of progress on the font that I had planned to send you earlier this month, and decided to scrap it. This has officially put me behind schedule—I’m sneaking in its replacement today (just under the wire!), and I expect to deliver August’s font later in the month as well. 

Frustration can certainly grind things to a halt, but it can also serve as a fuel that propels projects through periods of doubt and uncertainty. Many of my fonts sit around in a mostly-complete-but-can-I-really-call-it-finished? purgatory...sometimes for years! It can take an angry moment—“Why the heck is this font still sitting around like this?”—to give them that final push out the door.

Since its last update in 2020, Bild has existed as a disjointed almost-family: after starting as a single Black Condensed weight, I expanded it first as a series of widths in one weight, and again as a series of weights in one width. Recently, I’ve gotten a few requests for more Bild, and I had to ask myself: Why the heck is it still sitting around like this?

This month, I’ve finally added Bild’s missing fourth corner, uniting Bild into a single series and fleshing out the wider/lighter side of the designspace. I present to you: The Rest of Bild.

Named by Indra Kupferschmid and prompted by Sam Berlow nearly a decade ago, Bild follows in the footsteps of the “black sheep” styles of the classic mid-20th century workhorse Trade Gothic. While most of Trade Gothic’s design resembles Benton’s News Gothic/Franklin Gothic (see also the recent HEX Franklin), its Bold and Bold Condensed No. 20 are more rigid, with straight-round shapes and not-quite-horizontal terminals on letters like G and C.

Bild imagines an alternate universe where an entire family is built around these straight-sided outliers. I tried to retain the clunkiness of these styles but without any grittiness; I wasn’t going for a warts-and-all revival of early 20th century headline types like Alternate or Railroad Gothic.

At the same time, I wanted to leave in enough inconsistency for Bild to remain a little pedestrian, with notably less mechanical sparkle than, say, Nickel Gothic Condensed. This is maybe a weird thing to say about fonts that I like, but the Trade Gothic outliers have a beautiful dullness to them, and I think part of the reason I’ve put off this update for so long is because I’ve never been sure how to capture that.

Like last month’s Rhody, straight-sidedness is a crucial part of this design. As Bild’s shapes widen and its O becomes more circular, I looked for ways to accentuate that feature. I avoided letting the round shapes get too wide, and I played a lot with the curve tension and stroke angle in letters like p/d/b/q to reinforce the stop-and-go momentum of these shapes; their bowls needed to feel like three separate gestures instead of one continuous curve. 

Bild’s multiaxis variable font also includes several feature variations carried over from the previous versions, hard swaps among the smooth interpolations. This includes a T with tuck-under kerning, a Bold i/j-dot that snaps to the cap height or the ascender height depending on the width, and a Q that gains a cross-through tail in its lighter weights.

After years of hemming and hawing on Bild, I gotta say I am relieved to see it unified into a coherent family. I don’t know…maybe I need to get frustrated more often?

June’s Font of the Month: Rhody Wide

Ahhhh, June! Here in Western Mass. things are in full bloom, and as I write this I am sitting on my deck in a bathing suit under the large pink blossoms of our big rhododendron (pictured throughout). 

Distracted by the nice weather, and busy shepherding a few big type families toward the finish line, I had no idea what to send you this month. Too much project management and troubleshooting, not enough actual drawing of letterforms. So for the club, I wanted to find something low-stakes, where I could decompress by adopting a “don’t think, just draw” mentality.

It turned out the answer was blooming right outside my window! As our rhododendron began to bloom, I picked up my old friend Rhody where I left it in 2018, and this month I’m delighted to send you a new clipping: Rhody Wide.

Because it has been half a decade since I’ve written about this typeface, please allow me to reintroduce it to you: Rhody is a mechanical slab serif with too many slabs for its own good. It was inspired by a calendar with extra-slabby lettering that I encountered in the Mölndals Stadsmuseum, outside of Gothenburg, Sweden, and until now had one width and five weights.

Aside from the gratuitous slabs on letters like a and e, its other prominent feature is its straight-sided curves. In the original design, round letters like O are shaped like a stadium, with tight curves on the top and bottom and vertical lines on either side. This feature helps condensed letters pack together like a picket fence, but doesn’t make much sense when the letters have to be wide.

So in the new Wide version, I took that elongated stadium shape and flopped it on its side: the sides are curved and the top and bottom are flat. Thinking systematically, this is kind of a weird move. Wide and narrow don’t interpolate elegantly, if at all, and this approach required a total redraw of nearly every character…it’s almost an entirely different typeface. 

Fonts can contain these complex hierarchies of weights, alignments, and relationships, but in the end it all comes down to whether the shapes feel like they work together. And in this case I thought that preserving an overall feeling of rigid, streamlined geometry, rather than any specific shapes, was enough to hold the family together.

I tried to let feelings be my guide on this one, and wasn’t compelled to stay loyal to the original font (t, r, U, K, and X all have significant changes in form). I enlarged the inktraps and divots in vertical serifs in C, S, and G, to intensify the “bite” of those shapes, and I flattened out the spines of S and &, to amplify the harshness of the geometric curves. Perhaps most significantly, I departed from the relatively even proportions of the original, and let each character get as wide as I felt it wanted to be.

Lately, I’ve been browsing jazz album covers, and I love how many of them use wide slabs to embody the “long and low” midcentury style. I’d love to see more layouts like this today, but I get that wide fonts are hard to use, especially in mobile-friendly layouts. I still think they’re a great way to add something unexpected to slugs, subheads, or even short titles…especially in something in a film or presentation when you have the space.

May’s Font of the Month: Lab DJR

I love a good pixel font, and I always suggest that type enthusiasts try their hand at making one. Some of my outline-based fonts have started as pixel fonts, and I think they are a great way to experience the playful system-building aspect of type design without the stress of drawing nice curves.

A few weeks after variable fonts were introduced in late 2016, I made my first one. It was about as simple as a variable font could be—each letter was assembled out of a single, repeating, morphing shape.

Looking back, this font was an obvious precursor to the kind of small-scope, experimental fonts that I love to make for this club. But back in 2016, I had no idea what to do with it—as an early variable font, it didn’t work in any shipping browser or desktop app at the time. So I never gave it a proper release and it has been gathering dust on my desktop ever since.

Once or twice a year, someone will ask to use Lab DJR for something; I’m able to send them the old version, but I always think that it’s about time for me to dust off this project, reconstruct it using the latest variable font-making techniques, and expand it. So this month, that’s exactly what I did.

Lab DJR offers variable axes that lets you morph its default square pixel into a circle, a diamond, and a sparkle. On top of that, you can adjust their size in a variety of ways and even “split the atom” to divide each shape into four similar shapes. But the real fun comes when you mix the axes together and the outlines start to glitch out. When you use two at a time, the transformations are usually somewhat predictable, but after three or more, chaos reigns.

This typeface joins a rich and growing genre of dynamic pixel fonts, ranging from ambitious proto-variable systems like Bitcount, Elementar, FindReplace, and various projects by Muir McNeil, to imaginative variable-centric designs like Tiny, Littlebit, Homecomputer, Handjet, and Gridlite (which was used to great effect in the 2021 identity for the Typographics festival)...just to name a few!

Lab DJR was supposed to be the simplest variable font possible, but upon revisiting it, I couldn’t resist adding one more layer of complexity: color. I wrote a python script that randomly assigned one of eight colors to each pixel, and created OpenType contextual alternates to mix up the colors in repeating glyphs to make things feel even more scattershot. 

Of course, I don‘t expect a confetti pixel font to have a ton of practical uses, but I think the magic of “toy fonts” like this one is how they can unexpectedly cross the divide from impractical to practical. What looks cheesy with random colors has the potential to become a tasteful pattern or decorative drop cap once you harmonize the color palette with the other elements in your design.

Which brings me to the other thing that toy fonts are good at: offering interesting use cases for emerging font tech. My Color Font Customizer lets you drag on your font, customize the color palette, and download the modified version. But even better than that is CSS font-palette, which web browsers have started shipping in the past year—Myles Maxfield and I published a little font-palette how-to, if you’re interested. Desktop apps have been slower to support dynamic color palettes, and I hope Lab DJR serves as a nice reminder that it would be so cool if everybody did! 🥺