Responses by Alex Tomlinson, designer and typographer; and Richard Yee, designer and developer.

Background: The purpose of the site is to market the Whirly Birdie and Whirlybats fonts in a way that’s as fun as we think the fonts are. Since variable fonts gain extra superpowers on the web, we set out to create a site that could tap into all of that animated energy. We wanted to show the fonts in a variety of delightful examples to inspire both print and digital design.

The goal was to create a sweet, self-contained promo page for the font family. We think this limited goal kept us focused on bringing the most graphic and exploratory design choices to the site without the pressure of implementing a larger, more comprehensive website for an entire font company. That being said, it would be very cool if people do check out our other work because of this project!

Design core: The font specimen and editor. Even though it’s super whimsical, we think it has some of the most intuitive controls for a variable font out there on the web today. There’s a bounce and subtlety to many of the interactive elements, which helps reinforce the personality of the font family.

Favorite details: The incorporation of the Whirlybats font as the actual cursor to interact with the page. Whether it be the subtle grabbing animation when interacting with a slider, or when the cursor transforms into a pair of animated dice over an element that you can randomize, it’s incredibly satisfying. We think our custom animated cursor was the last step in really transforming the page into another realm.

Challenges: The hardest part of this entire journey was definitely trying to consolidate our crazy explorations into something that had just the right balance of functionality and fun. In these side tangents, we explored ideas that eventually led to creating even more glyphs for the Whirlybats set, one of which became the base for the variable font cursor. Ultimately, this collaboration between web and type design enabled us to evolve both the website and the development of the font itself.

Navigation structure: While whirlybirdie.com is a single-page site, we wanted to add something dynamic and delightful for our navigation. We gave each section on the page its own mascot Whirlybat glyph. Our main navigation button dynamically switches between these mascot glyphs depending on where you are on the page and automatically hides itself when not needed to give it an extra pop.

Technology: The site was built on Svelte, a front-end framework with a different approach to building apps. By shifting most of the work into a compiler, Svelte ultimately creates much smaller bundles that perform with blazing speed.

We would also really like to call attention to Glitch, the incredible community and website that enabled us to code and collaborate in real time. It’s one of the few tech products we’ve used and feel good about, because they’re operated by truly great people who believe the web is for everyone and not just a handful of corporations.