Donny Truong just released the second edition of his invaluable resource , featuring Roslindale and Fern (with Vietnamese accents I drew just for him!)

vietnamese typography

June’s Font of the Month: Merit Badge


It’s hard to talk about recent developments in font technology without mentioning two hot topics: variable fonts and color fonts. As support for these two technologies has been improving over the past year, a natural question arises: “Can you have a variable color font?”

Well, as you can see with June’s font of the month, Merit Badge, the answer is a resounding “Yes! But...”


Before we get into the technical nitty-gritty, let’s start with the design. The inspiration for Merit Badge comes from a Boy Scout guide that I found at a fantastic used bookstore in Shelburne Falls, Massachusetts (not too far from my new house!). It featured a blocky slab serif with a striking inline stroke. Because of its modularity and relative simplicity, I thought it could be a fun (and manageable) starting point for experimentation at the intersection of color font and variable font technologies.

Many color fonts out there rely on embedded image data (SVG or PNG), which is great except that images don’t respond to OpenType glyph variations (only glyphs do). Fortunately, the COLR/CPAL approach takes normal glyphs and layers one on top of the next, making it perfect for a color variable font. Color font enthusiast Roel Nieskens used this same approach to turn my silly drawing into a variable color font proof-of-concept, and he provided invaluable feedback on Merit Badge as well.


Variations-wise, the standard weight axis plays with the relative thickness of the interior/exterior and inline strokes (try animating it!). Meanwhile, the custom SANS axis will reduce the length of the slab serifs until they disappear, just in case this design wasn’t already basic enough for you (see also the recent Foreday which has a similar feature).

Color-wise, I’ve included a handful of color palettes in the font, but most software won’t let you see anything but the default palette of turquoise, blue, and yellow. With the help of Chris Lewis, I put together a simple minisite where you can customize the default palette of your font and make it whatever colors you want!

As of June 2018, Merit Badge seems to work nicely in recent versions of Safari, Chrome (depending on the operating system), and Edge. Firefox gets you the color font, but no variations (for now). Photoshop and Illustrator get you variations, but no color (they support SVG color fonts, though). But have no fear: you can always use OpenType Stylistic Sets 1–3 to access each of the layers, and then color and stack the text blocks yourself.

So, is Merit Badge the most usable or versatile font I will send you as part of Font of the Month Club? Probably not.

Is it a bit early to be considering variable color fonts for production-level work? Probably.

But I wanted to release this font to you now because, A) experimenting with this stuff can be fun, and B) hopefully it will result in better support for these kinds of fonts in the future. (I am proud that the development of Merit Badge has already yielded bug reports for Safari, Chrome, Firefox, and Illustrator!)

For those of you who have signed up for the club and got your copy, let me know if you hit any speed bumps, and I hope you enjoy playing with this font in all of its blocky simplicity and technical complexity. Have an excellent June!

April’s font of the month: Rumpus


Distinctive serifs can be a blessing and a curse. The shape of the serif can get repeated so many times in a line of text that it can easily come to be the defining characteristic of a typeface, and consequently the glue that holds that line together.

But serifs don’t go everywhere. In typefaces that rely on distinctive serifs to be that glue, there is always a problem: How do you get unserifed letters like O to feel like they are speaking the same visual language as the rest of the typeface?

One of the things I love about Stephenson Blake’s 1883 Wide Latin is that it lets pointy stuff get super pointy and it lets round stuff get super round, but it all seems to kinda work. But I’ve been wondering what all this wonderful sharpness and roundness would be like if it just weren’t so...circus-y. And that’s where April’s Font of the Month Rumpus comes in.


I started drawing Rumpus years ago in a variety of widths, and to be honest, I’m still not sure that I have a handle on the design. It abandons Wide Latin’s modern structure for a more humanist one, and is more consistently wide across both caps and lowercase. It also plays the round/pointy game a little differently than its predecessor, losing some of the extra serifs on letters like V and W, but making up for it with diamond dots and interior corners.

Rumpus is stilly very much a work in progress, and I think pieces of the design are still unresolved. Still, I find that it is an excellent choice if you don’t have a lot to say but have lots of room to say it!


Using Output Sans Hairlines

I’ve been working on Output Sans a lot recently. And in anticipation of its upcoming release, I prepared a special preview of Output Sans’s thinnest weights for the wonderful members of the Font of the Month Club.

Output Sans Hairlines is not the thinnest hairline font out there (talk to Lucas de Groot about “The Thinnest”), but it is still pretty dang thin. One other notable thing about Output Sans Hairlines is that its stroke thickness and optical size are inextricably linked between 34pt and 166pt.


This means that, using its variable font, you can set text at 34pt and then set the stem weight of the letters to be 1px thick. Then you can double the size (or triple it, or quadruple it!), and then set the stem weight to remain (roughly) 1pt thick the entire time. Hairlines can be super finicky and sensitive to size, so this feature can be handy when you want to maintain consistency in weight across text of different sizes.

Setting these 1pt hairlines is pretty easy: just make sure that the value of the Optical Size axis is equal to the point size of the font. Here’s how that looks in the latest version of Adobe Illustrator CC:

Illustrator screenshot

In the future, I would love to see an optional checkbox that would link these two values together, so the optical size axis’s value can be set automatically.

This is not the only feature in Output Sans Hairlines...did anyone see the alternate forms? To all the Font of the Month Club members, I hope you enjoyed this month’s edition. And if you’re not a member yet, there are two days left to sign up before I send out April’s font!