Articles

Recursive, for Google Fonts

Recursive is a variable font family for vibrant code & UI. It started as my thesis project at KABK TypeMedia in The Hague, Netherlands, an immersive 10-month MA program for type design, where I studied in the class of 2018. Recursive was my exploration of how to create a font that bridged two things I love: programming and brush lettering. It was also a deep dive into the new world of variable fonts — fonts that can contain fluid ranges of styles (in contrast to the single, static styles of traditional fonts).

Recursive font specimen showing a weather app and a code terminal
Recursive is made to work across code & digital user interfaces, with five variable axes to allow designers new levels of typographic expression and control.

I graduated with my thesis project version of Recursive at a lucky moment – just a few months later, Google Fonts was searching for variable font projects to commission that would champion the new technology of variable fonts, and push the boundaries of what was possible in typography. Google Fonts came across Recursive, and asked me whether I would be interested in completing it and releasing it under open-source licensing. I was thrilled with the opportunity to complete my wild idea, and especially excited to freely contribute it to the world of developers that inspired me to make a font for code, in the first place. With the support of Google Fonts and some extra help from a few talented friends, I was able to overhaul my prototypes and build a fully functional type system.

Grid of font styles included in Recursive

Recursive includes 5 variable axes:

  1. Weight (wght) goes from Light to Black
  2. Slant (slnt) goes from upright to a 14° italic
  3. Casual (CASL) goes from serious, linear letterforms to playful, brushy, casual letterforms
  4. Monospace (MONO) goes from proportional spacing (ideal for UI) to a fixed-width spacing (ideal for code)
  5. Cursive (CRSV) controls whether letterforms have Roman or Cursive forms

If you’ve ever used fonts before, you can probably guess what Recursive’s Weight and Slant axes do. As you might guess, Weight takes letters from lighter to bolder, while Slant takes them from upright to slanted/Italic. As variable axes, these do offer something relatively new: instead of choosing from only a few styles, you can smoothly control exactly the weight and slant you want from within these ranges.

A grid of font styles
Recursive has a weight range from Black to Light and goes from upright to 14° of slant.

Recursive’s Casual axis is its most unique feature, and exploring this as a variable axis was my primary reason for making the typeface.

The “casual” forms of Recursive are inspired by a foundational form of brush signpainting called single-stroke casual. This is style I love from old signs around NYC, classic display fonts from foundries like PhotoLettering, and modern hand-lettered art from folks like Ken Barber.

Examples of single-stroke casual fonts from the 1971 PhotoLettering One Line catalog
Examples of single-stroke casual fonts from the 1971 PhotoLettering “One Line” catalog, used with permission from House Industries

During my time at KABK TypeMedia, I became even more obsessed with the style due to the amazing signpainting of my incredible inspiring classmate, Gen Ramírez. I had to try it out for myself, and see what might happen when I pursued my own style of it.

The word 'args' painted with a flat brush in a single-stroke casual style.
Recursive is a personal interpretation of the single-stroke casual style of signpainting. Here is my attempt at painting the “stroke logic” of the family – I wouldn’t win any awards for painting, but having such a stroke logic in mind was critical in designing a cohesive system.

Recursive’s Casual axis has another end which I called “Linear,” a general description for simple sans-serif fonts with low contrast and rectangular stroke endings. It was meant as a visual and logical counter to the Casual style. This range is actually based on a very simple principle: all glyphs can be drawn as a series of brush strokes, and each of those strokes can be drawn with vector outlines that can morph from sharp-cornered rectangles to soft-cornered “brush strokes.”

A diagram of the base stroke of Recursive
Recursive is based on the elemental idea of a stroke drawn with vector points that can interpolate between brushy and rectangular.

Whereas Casual is designed to add as much personality as possible to text and code, Linear is designed to amplify legibility and get out of the way to facilitate deep thinking. Because the Casual axis is variable, Recursive can transition smoothly from Casual to Linear. A happy accident is that the middle ground proves quite useful, as well, for text that has a bit of softness and a playful spirit, without being quite as loud as a full Casual.

Recursive Linear to Casual
Recursive’s Casual axis (CASL) goes between “Linear” and ”Casual,” with surprisingly useful hybrids between them.

Recursive’s Monospace axis also holds a few special features. At a basic level, it fluidly moves from proportional to fixed-width spacing, which is just plain cool. But, the proportional side is a bit unique, in that it retains the same metrics across all weights and slants. That allows a few neat things in user interfaces, such as text that smoothly transitions from, say, Regular to Bold Italic upon user interaction — without jostling the UI layout. And again, it’s a variable axis, allowing for a middle ground that looks like a monospaced font, but has more natural spacing.

Recursive Proportional to Monospaced
Recursive’s Monospace axis (MONO) goes from proportional (characters have natural widths – ideal for reading and user interface design) to monospaced (characters all take up the same, fixed width – ideal for code and data).

Finally, the Cursive axis is a little different from the others. Rather than controlling a fluid range of styles, Cursive controls the lowercase forms of Recursive – specifically, whether they are a typical Roman style, or a more Italic “disconnected cursive” style, with scripty outstrokes suggesting a fast-moving brush. This interacts with the Slant axis in a way that allows a cursive Italic by default, when the Slant axis is adjusted.

Recursive’s Cursive axis
Recursive’s Cursive axis (CRSV) controls whether letters are given Roman or Cursive forms. This interacts with the Slant axis, to allow Cursive Uprights and Roman Obliques, where desired.

Recursive is open-source and available under the SIL Open Font License, Version 1.1, so you can freely use it for almost anything (but as always, please read the font license before using it). You can download Recursive and interact with demos for each axis on its minisite: recursive.design. You can also read more about the design and process of making it in the minisitse’s fuller process essay.