Create expressive and readable typography with variable fonts
summary
Covers concrete tools and results: Google Fonts adds Roboto Serif and Roboto Flex as variable fonts pack multiple styles in one file with a live demo and a Figma plugin, plus a codelab and CSS examples showing real file‑size savings; icons become variable too — Material Symbols: icons as variable fonts with weight fill optical size grade available in outline/rounded/sharp sets. Includes a readability experiment: grade changes show no major loss in dark mode, light mode differs only at extreme grades, and high grade can make light text more readable than dark.
AI-written summary · about
chapters (5)
- 0:00Start
- 1:13Introduction & Variable Fonts Technology
- 2:31Learning Variable Fonts & Symbols
- 7:00Introducing Material Symbols
- 20:40DESIGNLAB Migrating to Variable fonts
related talks
20mDynamic Typographic Systems with Variable Fonts
34mVariable Fonts: The Future of Typography Has Already Begun
33mConquer Variable Web Typography
32mModern Typographic Systems With Variable Fonts
46mReal Editorial Design on the Web with Variable Fonts
37mVariable Fonts — practical Guide
42mTypography for Frontends
33mVariable Fonts: WTF?