Introducing VariableFonts.io
This week marks the launch of a project nearly a year in the making. Or at least it’s been almost a year that conversations have been going on. Back in late fall of 2019, the project finally kicked off working with Matthew Rechs, Caren Litherland, and the Google Fonts team. The goal was to create a concise, easy-to-digest, actionable introduction to variable fonts—what they are, what they can do, and why they matter. And while it’s too early to say exactly how successful we’ve been, reactions have certainly been gratifying.
This week’s launch coincided with the unveiling of support for variable fonts in the main Google Fonts user interface. The hope is that as people start to search for and try variable fonts in the GF UI, they can learn more about them and take their experience further on this site.
How the site is structured
There are three main areas, and one that ties them together a bit across some other important considerations. We wanted to make sure that you could learn about what a variation axis is, see them in action, and see the CSS that powers it all in one place. So Designing with variable fonts is a great place to start.
The Implementation page covers how to use the Google Fonts API to get access to all of the variable fonts in their full range of flexibility, how to set up hosting variable fonts yourself, how to search for and select them in the new Google Fonts UI, and tips for best performance when implementing, regardless of how you get them.
Resources include links to books, websites, articles, videos, and more to help expand your knowledge about typography on the web, how to think and design with variable fonts, and lots of resource and playground websites to see them in action.
Finally, if you take a look at the About this site page, you can learn about how the site itself an example of how variable fonts can improve your user experience, accessibility, long-form reading comfort, and expand your design vocabulary. The typographic system and the design of the site itself is intended use all of the techniques and features available to help the site be more useful in light or dark mode, on any device, with any capabilities.
Where possible that also means designing a beautiful site that is also accessible and inclusive. While not perfect, I’ll continue to try and improve the design and implementation to address a broader spectrum of users. In some cases we’ve achieved WCAG 2.1 AAA, in others I know there is work to do. If you see something that needs addressing, the entire codebase is housed on GitHub—so feel free to open an issue with details and/or contribute a fix.
Going forward
I'll continue to add resources, and have plans to add some small case studies to showcase successful implementations, and some starter kits to help you get up and running.
Thanks
This site was by no means a solo effort. In fact it would never have gotten started without Matthew Rechs (formerly the GM at Typekit/Adobe Fonts, now of Business Letters fame) and I combining our efforts and conversations with David Crossland (Program Manager for Google Fonts). Once the project started to take shape, the obvious choice for editorial expertise was Caren Litherland. It was a joy to work with her to help turn my rambling into writing! On the Google Fonts team, Dave assembled a wonderful bunch: Dawn Shaikh, Irin Kim, and Paula Ashton. As we approached launch, we had the good fortune to have Kenneth Ormandy join with some much-needed development help as well.
We worked hard to make this useful for all, and I’ll certainly endeavor to be a good steward of the site going forward. Let me know what you think.