Variable Fonts — practical Guide
summary
Explains how axis-based Variable Fonts work with concrete examples: CSS properties like font-variation-settings and new numeric values for weight (1–999), stretch (percent) and font-style oblique (degrees), plus optical-size and Illustrator/Photoshop UI sliders. Shows demos (Kairos Sam prototype on GitHub, Clifford family) and a JS library by Bob Taylor for runtime control, reports up to 70% smaller file size versus static families, notes browser support, interpolation bugs (kinks, ping‑pong), curated vs open design spaces, and tooling/testing challenges.
AI-written summary · about
chapters (10)
- 0:00Start
- 3:53Font Mastering
- 9:50Font Weight
- 13:51Why Gutenberg Got So Famous
- 16:00Scaling a Typeface
- 19:21Font Format Variable Fonts
- 21:29Custom Axis
- 23:39Linear Interpolation
- 31:46Advantage of Variable Fonts
- 33:41Browser Support
related talks
33mVariable Fonts: WTF?
34mVariable Fonts: The Future of Typography Has Already Begun
32mAre variable fonts the future of web typography?
35mVariable Fonts: Full Circle 1991–2017
42mTypography for Frontends
31mVariable Fonts & Readability
20mDynamic Typographic Systems with Variable Fonts
33mVariable Fonts and the Future of Web Design