Modern Typographic Systems With Variable Fonts
summary
Variable fonts plus CSS custom properties and calc actually let typography scale fluidly by size, weight, width and grade rather than by extra files, with concrete wins: 84k replaces 18 files and IBM’s variable Plex turns ~960k across 16 files into two files at 233k. Dev tools expose axes live so values are copy‑able, a progressive font enrichment demo serves 6.5k instead of 21k for a page, and a Georgia design system runs this in production across ~80–100 sites.
AI-written summary · about
chapters (12)
- 0:00Intro
- 0:31Variable Thoughts
- 1:53Why Variable Fonts
- 2:46CSS Custom Properties
- 6:30Variable Fonts
- 8:10Screen Size
- 9:38CSS Locks
- 14:11User Experience
- 16:02Dark Mode
- 21:24Georgia Gov
- 23:05IBM
- 26:48Progressive Font Enrichment
related talks
20mDynamic Typographic Systems with Variable Fonts
49mDynamic Typography with Variable Fonts
36mVariable Fonts and Dynamic Typography with CSS
45mVariable Fonts and Responsive Typography
33mVariable Fonts and the Future of Web Design
19mVariable Fonts and the Future of Web Design
42mTypography for Frontends
46mReal Editorial Design on the Web with Variable Fonts