Variable Fonts: WTF?

on YouTube ↗33m

" summary

Variable fonts compress many static files into one, so a site that might need 54 separate font files becomes a single variable file — browsers and modern editors support it and CSS uses font-variation-settings to pick numeric axis values. The spec exposes axes like weight, width, slant, italic (binary), and optical-size, enabling dark‑mode tweaks, AR/VR angle‑aware width changes, and playful axes (a “melt” axis). Adoption affects licensing and design effort, but live demos (NielsenIQ, AR examples) show it works and saves bandwidth.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 11:38Slant Axis
3. 13:35The Optical Size Axis
4. 22:07The Cost for Variable Fonts
5. 26:50Halo Effect

" related talks

• 37mVariable Fonts — practical GuideMarianna Paszkowska · webinale 2019
• 19mVariable Fonts and the Future of Web DesignMandy Michael · dotCSS 2018
• 34mVariable Fonts: The Future of Typography Has Already BegunGiulia Laco · CSS Day 2019
• 30mVariable Fonts and the Flexible Nature of Screens and DevicesMandy Michael · JSConf.Asia 2019
• 36mVariable Fonts and Dynamic Typography with CSSJason Pamental · Web Unleashed 2018
• 45mVariable Fonts and Responsive TypographyMandy Michael · You Gotta Love Frontend 2020
• 33mVariable Fonts and the Future of Web DesignJason Pamental · Web Unleashed 2017
• 20mVariable fonts: a million times the possibilities...Laurence Penney · dotCSS 2017