Join us for this intimate and interactive workshop that will run between 10am and 2pm, online.
This workshop will introduce you to variable fonts, what they’re good for, where to get them, how to use them, and why you should care. We will introduce the variable font format through a number of live projects and examples. We’ll explore the different kinds of variations, see how they integrate with existing CSS and a couple of new attributes, and discover what they offer for design, accessibility, and performance.
- Variable Fonts 101: what’s an axis?
- CSS syntax: details, support, and integrating with existing sites
- Replacing static fonts with variable ones while still supporting older browsers
- Optical size: what it is, and how it can make type work better at a broader range of sizes
- Use more styles: how great print typography has always used a broader range of styles, and how that can help make typography on the web much more engaging
- Dark mode: why just inverting color contrast isn’t enough, and how variable fonts and a little extra typographic finesse can dramatically improve the results without compromising site performance
The second part of the workshop will focus on finding, evaluating, and implementing variable fonts from a variety of sources. We’ll go through:
- Finding variable fonts: web catalogs, foundry sites, and sources like MyFonts and Google Fonts
- How to self-host and set up your own @font-face rules
- Google Fonts catalog: exploring their growing catalog of variable fonts and support for searching them out throught their UI
- Google Fonts API: using the API to quickly and easily get variable fonts on your site
- Performance: top tips & techniques
- Getting everyone on board: how to convince your team/bosses/type vendor
Graphic Designers, UI Designers, Frontend Developers interested in how variable fonts can improve design vocabulary, accessibility and UX, and frontend performance.
To get the most out of the workshop, it’s good to have some familiarity with HTML and CSS—but it’s not absolutely required. We will be looking at a bunch of code, but you don’t necessarily need to be able to write it. I will be giving you a code repository so you can follow along, or simply pass along to your colleagues if you prefer.