Real Editorial Design on the Web with Variable Fonts
summary
Demos show how variable fonts consolidate many weights into a single file and map to CSS properties like font-stretch, font-variation-settings and the optical‑size axis so designs adapt by CSS alone. Examples use CSS Grid, shape-outside, SVG filters, blend modes, clamp, scroll-snap and localStorage. Real results: swapping eight font files for two variable fonts cuts ~350KB from font loads and improves performance in a day of work; a multi-site rollout spans ~80 government sites; variablefonts.io hosts the code and live samples.
AI-written summary · about
chapters (11)
- 0:00Introduction to variable fonts
- 3:55What are variable fonts
- 8:28Optical size in typography
- 11:23Typography goals and techniques
- 13:16Dynamic editorial design systems
- 26:21Audience Q&A and resources
- 27:25Book typesetting with variable fonts
- 33:54Accessibility and user settings
- 36:08Performance benefits of variable fonts
- 41:26Real-world case studies
- 44:34Conclusion and future possibilities
related talks
36mVariable Fonts and Dynamic Typography with CSS
20mDynamic Typographic Systems with Variable Fonts
45mVariable Fonts and Responsive Typography
33mVariable Fonts: WTF?
33mVariable Fonts and the Future of Web Design
33mConquer Variable Web Typography
19mVariable Fonts and the Future of Web Design
49mDynamic Typography with Variable Fonts