Very Responsive Typography with Variable Fonts
summary
Variable fonts animate and interpolate axis values so text can change weight, width or bespoke axes in real time using CSS properties and font-variation-settings, reducing multiple file requests — Source Sans Pro shows a single weight at 111KB versus a variable file at 112KB — axes range examples: weight 200–900 and viewport mapping 320–1440 with live JS decimals, demos include a live voice-reactive fire effect called marshmallow driven by Web Audio and a ambient light sensor demo that worked on Chrome but not on Firefox and caused early overheating before performance fixes.
AI-written summary · about
chapters (42)
- 0:00Introduction
- 0:49Jelly
- 1:26Variable Fonts
- 2:31Variable Functions
- 3:00De Cobre
- 3:28Browser Support
- 4:13Using Variable Fonts
- 6:37Fonts on the Web
- 6:53Variable Fonts for Performance
- 7:27Reducing Front Requests
- 8:15My Answer
- 8:34Source sans Pro
- 9:51Flexibility
- 10:57More Flexibility
- 11:19Jello
- 11:49Print Design
- 12:53Fonts
- 13:29CSS
- 13:45Twitter demo
- 14:05Handwriting fonts
- 14:22Layering fonts
- 14:50Wind VF
- 15:04Google Fonts
- 15:25Demo
- 16:00Hot
- 16:10Marshmallow
- 17:29Controlling the Font
- 17:58Color Scheme Media Query
- 18:08Dark Mode Example
- 19:57Screen Width
- 20:22Box Width
- 20:36breakpoints
- 20:58JavaScript
- 21:17Decimal
- 22:34Cracked Phone
- 23:05Scribble Tone
- 23:28Web Audio
- 25:29Blooming GX
- 26:04Experiences
- 26:24Jelly Font
- 26:48Why Variable Fonts
- 27:22Conclusion
related talks
30mVariable Fonts and the Flexible Nature of Screens and Devices
19mVariable Fonts and the Future of Web Design
45mVariable Fonts and Responsive Typography
32mAre variable fonts the future of web typography?
36mVariable Fonts and Dynamic Typography with CSS
33mVariable Fonts: WTF?
32mModern Typographic Systems With Variable Fonts
49mDynamic Typography with Variable Fonts