Lessons Learned Making My Variable Font

Interview with Type Designer Tyler Finck

Published in

Type Thursday

7 min readJun 18, 2018

Not sure where to begin in making a Variable font? TypeThursday founder Thomas Jockin spoke with Tyler Finck about his experience making League Mono Variable. You’ll learn the considerations in both making and using a variable font on the web.

Kara in discussion with Michelle about her lettering project at GoogleNYC.

Thomas Jockin: Hi Tyler! Thanks so much for taking the time to talk on TypeThursday.

Tyler Finck: Hi Thomas, glad to be here!

TJ: Variable fonts are always interesting to talk about. But before we get into the specifics, could you share with us how you got into type?

Tyler’s introduction to Typography

TF: I stumbled into type via type design software (FontLab 5) that a friend “loaned” me back in 2004. It was overwhelming, I made some garbage, and focused instead on designing things with type for the next 4 or 5 years before trying to make my own letters again.

TJ: I remember the Fontlab 5 era of typeface design. What brought you back to making your own letters again after the 4–5 year hiatus? An what did you make after that hiatus?

TF: In 2008 I realized I had been using type as a crutch in my design (rightfully so, I think). I was making everything else from scratch: textures, photos/videos, the code, etc. and felt like I was really just piggybacking off of the impressive work of people who actually designed the fonts. While working at a small creative agency in Ithaca I had created logotypes, customizing lots of existing letters, then creating my own from scratch. So I finally did a little homework, reopened Fontlab, and spent a few months making Blackout.

TJ: Was Blackout released on the League of Movable Type?

TF: Not initially, no. I used it only on my site, since it was full of quirks/flaws. This was also pre-webfont popularity/accessibility, so it was “sliced” from a PSD design and coded into sursly.com. I don’t think The League existed when I finished Blackout, but I could be wrong.

TJ: Now that is old school! When did you get involved with the League?

TF: I contacted the League I think the day I found out about it (via Twitter, probably). So some time in 2009 I guess. At the time my website had been stolen so many times I was busy making a new design, new fonts, and felt like I had improved Blackout enough to share it.

TJ: After the improved Blackout, what was your involvement in League Mono?

TF: It had been a few years since I had made anything League specific, and a monospace font was something missing from The League catalogue. So I started from scratch.

TJ: You recently made a variable font rendition of League Mono. How was that experience? What extra things are required to make a Variable font?

Knowing that people would be using this font made me want to create something practical, and as least-broken as possible.

The process of making a variable font

TF: So I switched to designing type with Glyphs a few years ago, and developed the process of using multiple masters to interpolate various styles (weights, usually). Glyphs published a tutorial in early March of this year on how to convert a multiple master setup to export a variable font. Because the masters (in this case, light, bold) were compatible — using the same underlying structure — the implementation to a variable font meant declaring in font parameters that it is a variable font, then giving it weight and width axes, with coordinates. The tutorial is wonderful but because I had only drawn light and bold, I had to go back and make new masters for the width (condensed and extended). That process is a combination of copy/paste (duplicating a similar master, actually), many optical corrections, a little measuring, and a whole lot of exporting/testing.

TJ: What were some of the things you had to test? Was it drawing/ outline aspects? OpenType code? Something else?

TF: I had never used a variable font outside of web testers/experiments like https://v-fonts.com/ and https://www.axis-praxis.org/ — so my process was:

Step 1: Learning where the variable sliders exist in Adobe apps. They’re in different places in Illustrator and Photoshop, and don’t yet exist in Sketch.
Step 2: Testing the extremes, seeing how the most condensed style felt in the heaviest and lightest weights, and then doing the same with the most extended style.

So yeah, that was mostly drawing, no real code on my part. Because you can also declare style instances (League Mono Bold Wide, for example) it meant figuring out whether that should be an even “700” weight or something else. Or if the global width for “Wide” at 150 was just right. This is all super subjective, too. Knowing that people would be using this font made me want to create something practical, and as least-broken as possible.

TJ: How was making the promotional site for League Mono Variable? Were there any special challenges making the site. (I take it you’ve upgraded from sliced Photoshop docs to make the site)

It’s surprisingly easy to bloat an experience even with a 75kb webfont file.

Using a variable font on a webpage

TF: Yeah that little one pager was a blast to make, and also showed me where variable fonts are great, and potentially damaging to the experience. Using one TTF file to declare a custom style on the file is amazing (although I should have done a woff2 conversion for other browsers). Animating customized styles with CSS was also super tempting, but absolutely browser crushing. An early version of the promo site had a simple “a” and “g” changing weight and width in a continuous keyframe loop, and it’ll gobble up your local storage to process that beautiful animation for as long as you have the browser open (not good). There was also no design, I didn’t open an app to lay things out or pre-visualize, I just used Brackets for coding and Chrome/Safari. I don’t consider myself a web/interface designer anymore, but it was fun to step in those shoes to see how the variable font handles. But making it accessible for all browsers and bandwidths is a concern, and something with room for improvement. It’s surprisingly easy to bloat an experience even with a 75kb webfont file.

TJ: That is incredibly telling as one of the main advantages of variable fonts is the file size savings. How do you feel about that tension?

TF: Yeah it’s a bit ironic, but mostly (maybe only?) because I went overkill simply trying to show the capabilities. I don’t think, and I hope it doesn’t happen, that people will be loading up 60 different styles of League Mono, or any variable font, on a site. Even if you make 10 weights/width combinations, which is a lot, the experience is still going to be okay. Keeping it simple is never a bad idea.

TJ: What closing advice do you have for designers who are about to jump into making or using variable fonts?

In terms of making [a variable font], I can’t say enough good things about Glyphs.

What to consider when making or using a Variable Font

TF: In terms of making, I can’t say enough good things about Glyphs. Check out the free trial (30 days) which is how I got hooked. You’ll need the full version, Mini won’t cut it. Then it’s a matter of drawing clean, compatible letters, and drawing the two extremes (thin — heavy). As for using, I’m still learning how to do that. I just finished converting League Spartan to a variable weight font and will probably have a better answer for that once I start designing with it.

TJ: Thanks so much for sharing your experience making and using variable fonts, Tyler. Where can people keep track on what you’re working on?

TF: Thank you, Thomas. I update my Twitter when I make something shareable.

We’ll help you dot your i’s and cross your t’s

TypeThursday attendees love letterforms. Big-time. This means you’ll get detailed advice, delivered with care by fellow creators who know how much time goes into crafting crisp characters. Your work will emerge refined … no dots left behind. Submit your work to a TypeThursday near you.

Love this series? Sign up for TypeThursday’s mailing list to be the first to know when the next installment goes live.

Was this article interesting to you? Give us a clap below.