What does it take to create and launch a font? A Q&A with the Whirly Birdie creators

We asked co creators Richard Yee and Alex Tomlinson to share the story behind their new variable font, Whirly Birdie. This fun, flexible, and retro-inspired typeface launched a few weeks ago and it’s just getting started. As one of the most whimsical sites we’ve seen built on Glitch this year, this project should delight web developers and designers alike.

**A: We wanted to make a website as fun as we think the font is. Our idea was to create a “whole world” out of a font, and I think we got pretty far! There’s a clock made out of a font, a bookshelf, and we even hijacked your cursor- so that’s a font too! And, of course, our process involved Glitch at every step! Almost every element on the page began as a separate sketch on Glitch. I guess you could say our process was creating a whole bunch of neat little sketches utilizing the font, and then seeing what made sense together.

**R: **Yup, we wanted to make something cool combining each of our specialities. Alex is always drawing fonts. I'm always tinkering with weird web tech. We both use Glitch day to day, so this collab was bound to happen at some point! This project was a “playground” in the truest sense of the word. While we started with a loose plan, I think our multiple tangents on Glitch have allowed us to make something super fun.

**A: **I think it was all Glitch and Svelte. Unless there is something Richard isn’t telling me about!

**R: Svelte was a real gem of a find this year for me as a developer. Just its base configuration was super powerful. Didn't need a separate state manager nor an animation library. Svelte had most of them ready out of the box. It was also very versatile. I could utilize all the powers of a framework without forcing Alex to adopt it when collaborating. There's nothing wrong with vanilla javascript, and I'm glad we could keep some of that workflow with Svelte.

**A: I think the best way to explain variable fonts to web developers is simply: they're fonts with variables! Depending on what a typographer has drawn in their font, you can use variables to output different weights, sizes, or even animations from a font. The main benefit for designers is the creative freedom. They basically get to co-pilot a font’s design. The main benefit for developers is the ease of using variable fonts. Not much has changed in the CSS, except now you only have to import a single file! You do have this new "font-variation-settings”. Maybe Richard can convince developers better than I can?

**R: I definitely expect variable fonts to mature in the near future. The major draw would probably be cross-browser compatibility and stability. Chrome has seen some weird glitches, no pun intended, with how it renders variable fonts. Edge cases for sure, and I'm sure their teams are doing their best to fix all bugs coming in. We actually submitted a variable font bug we found while developing this website and they rolled out a fix last month!

That said, by baking animations directly into variable icon fonts, it removes the need for a library like lottie.js just to create animated SVGs. It's a super powerful spec, and most importantly, it was super easy to animate!

**A: I predict that Whirly Birdie and Whirlybats will take over the web, and you won’t be able to read a sentence without seeing an animated airship or UFO. My favorite trend in web design is DIY web design. Anything where you can tell someone designed or coded something themselves and didn’t just defer to some Bootstrap theme or Material Design generator.

**R: I definitely feel there's a trend for more bespoke gestures and performance that you would typically find in a native app. That said, I'm a big fan of progressive web apps, which are just websites that you can launch from an icon on your mobile homescreen. It frees you of the browser frame, giving you something that really does feel native. Needless to say, I have whirlybirdie.com installed on my phone. On trends in development, I'm a fan of what Svelte is doing to change up the JS landscape. Having most of the work done on the compiler and not the client is a nice shift in philosophy.

**A: Sell it yourself! A big part of the reason I decided on creating a standalone website for this font is that so many “graphic design marketplaces” are abysmal and depressing places. “Products priced 90% lower than yours are more likely to sell!” and “We are now taking 50% of your sales, because we are so devoted to making our service the very best for you! :)” are the sad realities of selling your soul to those places. As for lessons learned the hard way: we had the purchase button in low-contrast pale blue color when the site launched and we switched it to a nice green—and I swear it has impacted our sales.

**R: **Market your work and be confident about sharing! Whether it be on social media channels, aggregator sites, or even the @glitch twitter account, I think it's important to be active in seeking out specific communities that would be excited for your new product/website/project. Sharing process work is also a good way to generate interest. Alex was fairly on point promoting Whirly Birdie throughout our development cycle.

**A: That implies Whirly Birdie ever ends! I like to think of it as a living, breathing project. Since launch I’ve stealthily added at least 5 Whirlybat icons, and likely even more by the time someone reads this! As for future font projects, I think there is still so much to explore with variable fonts.

**R: **Would love more font collabs and maybe branching out even further. For now, I'm headed back to more experimental tinkering. I'm currently making a face-tracking web app for virtual live streamers. Hope to launch it early next year!