Variable Fonts: Beyond the Basics

Program Overview

Workshop Structure

1. Variable Font Mechanics

   How variable fonts actually work, axis ranges, and named instances versus custom values

2. CSS Implementation

   Using font-variation-settings, font-weight, font-stretch with variable fonts and understanding when to use each

3. Animation Techniques

   Creating smooth weight transitions, optical size adjustments, and performance considerations

4. Custom Axes Exploration

   Working with grade, slant, and typeface-specific axes beyond standard weight and width

5. Optimization and Fallbacks

   Subsetting strategies, browser support detection, and graceful degradation patterns

Hands-on coding exercises throughout

Full Description

Variable fonts have been around since 2016, but most developers still treat them like regular web fonts with a weight slider.

The real power is in custom axes and animation. You can create hover effects that smoothly transition between weights, adjust width based on viewport size, or even animate letterforms. But the syntax is confusing, browser support has quirks, and font foundries document their custom axes poorly.

This workshop is hands-on. You'll learn how to inspect a variable font file to find all available axes, use font-variation-settings correctly, and create smooth animations without performance issues. We'll also cover fallback strategies for older browsers and how to subset variable fonts to reduce file size.

I'll show you production examples where variable fonts solve specific problems: responsive headings that adjust weight at different sizes, interface text that adapts to user preferences, and micro-interactions that feel more refined than standard font swapping.