Online Workshop: Using Variable Fonts on the Web

This online 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. Set up in two 2-hour sessions to help fit into your pandemic-upended schedule and avoid information overload. Since interest has spanned a whole lot of time zones, I decided to schedule two different sessions.

The registration cost covers both 2-hour sessions, and the workshop will be conducted using the Zoom platform.

Session One

The first session 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.

We’ll examine:

• 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

Session Two

The second session 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

Prerequisites

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.

Workshop cost & registration

The cost for the workshop (including both sessions) is $95US. I’m offering special pricing for students and those with extenuating circumstances. If that’s you, just email me and I’ll provide a link to the discounted registration.

Clicking the ‘Register’ button below will take you to a checkout page on Stripe to complete the process. (Note the business name that will show is H+W Design—my wife’s and my company)

• Interested in another workshop? Get in touch!