Variable fonts: a million times the possibilities...

on YouTube ↗20m

" summary

Explains that OpenType 1.8 Variable Font stores a few master outlines plus point offsets so one file covers many styles, cutting webfont payload to a few kilobytes (example animated font ~3,900 bytes). Demonstrates the Axis-Praxis demo with drag‑and‑drop and sliders for weight, width and optical size, notes families with 74 and 259 faces, practical limits around 10–12 axes and 12-step rotations, uses WOFF2/Brotli compression, exposes font-variation-settings CSS and a working JavaScript polyfill.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 1:46Type on the web 1996-2010
3. 5:41Interpolating between "master designs" in a multi-dimensional design space
4. 13:49'wght' 394.4, 'wdth' 95.1
5. 14:47Dynamic control without JavaScript?
6. 17:52A single-axis font with some key frames

" related talks

• 34mVariable Fonts: The Future of Typography Has Already BegunGiulia Laco · CSS Day 2019
• 32mAre variable fonts the future of web typography?Bram Stein · CSS-Minsk-JS 2018
• 33mVariable Fonts: WTF?Bianca Berning · Pixel Pioneers Bristol 2022
• 19mVariable Fonts and the Future of Web DesignMandy Michael · dotCSS 2018
• 30mVariable Fonts and the Flexible Nature of Screens and DevicesMandy Michael · JSConf.Asia 2019
• 33mConquer Variable Web TypographyOliver Schöndorfer · Beyond Tellerrand Berlin 2018
• 36mVariable Fonts and Dynamic Typography with CSSJason Pamental · Web Unleashed 2018
• 29mPerformance Benefits of Variable FontsMandy Michael · #PerfMatters Conference 2019