Variable Fonts in Practice
A focused workshop where typography theory meets practical application — studying typeface selection, spacing systems, and readability at scale.
Variable fonts have been supported across major browsers for several years, but most projects still use them the same way as static fonts. The range of what they can do stays unexplored.
Axes and what they control
The standard axes — weight, width, slant, optical size — are covered first. Then registered versus custom axes, and how to read a font's axis table before writing a single line of CSS.
Using font-variation-settings
You will write font-variation-settings directly and through higher-level properties, and learn when each approach causes specificity issues. The course uses three different variable fonts so you see how axis ranges vary between typefaces.
A variable font is not just one font. It is a design space with rules.
Animation and performance
Animating type with CSS transitions and the Web Animations API is covered alongside the performance cost. File size, render performance, and when a variable font is actually lighter than a set of static cuts — the numbers depend on the project.
You will finish with a working demo that uses variable fonts responsively and accessibly, with fallbacks tested in older environments.
Workshop structure
Each step in this workshop builds directly on the previous. Participants work through real web typography scenarios rather than reading about them.
Course Stages
- What variable fonts are and how the format works
- Standard axes: wght, wdth, slant, opsz, ital
- Reading axis tables and font metadata
- CSS font-variation-settings: syntax and specificity
- Animating variable fonts with CSS and WAAPI
- Performance: file size, subsetting, fallback fonts
- Browser support and progressive enhancement
- Practical project: responsive variable font layout