Variable Fonts and the Flexible Nature of Screens and Devices
summary
Variable fonts let a single file interpolate axes like weight 200–900 and custom axes up to 1000 and the demos show practical results not promises: CSS @font-face with weight ranges and font-variation-settings, a viewport-to-weight mapping (320→1440 px → 200→900) implemented with JS and custom properties, mouse and audio reactive faces, an ambient light sensor → weight demo that responds in real time, a grass/grow animation using deco var axes, and surprising performance math where WOFF2 variable ≈112KB versus single weight ≈111KB.
AI-written summary · about
chapters (8)
- 0:00Intro
- 0:40Overview
- 1:38What are Variable Fonts
- 4:02How to use Variable Fonts
- 7:39Performance of Variable Fonts
- 10:37Variable Fonts in CSS
- 20:37Variable Fonts
- 27:47Conclusion
related talks
19mVariable Fonts and the Future of Web Design
45mVariable Fonts and Responsive Typography
29mVery Responsive Typography with Variable Fonts
33mVariable Fonts: WTF?
36mVariable Fonts and Dynamic Typography with CSS
20mVariable fonts: a million times the possibilities...
20mDynamic Typographic Systems with Variable Fonts
46mReal Editorial Design on the Web with Variable Fonts