Variable Fonts and the Future of Web Design

on YouTube ↗19m

" summary

Variable fonts cut load and complexity: a Source Sans variable example is 394 KB vs 924 KB for multiple static weights, and one file means one network request. Axes interpolate so any weight (e.g. 101–900) is animatable via font-variation-settings and CSS keyframes; examples build editable selectable searchable text with smooth weight and width transitions. Demos use Deco Var and Chi fonts, animate inline and custom axes, target accessibility (screen reader readable) and run in modern browsers (note macOS High Sierra requirement for some builds).

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 0:09VARIABLE FONTS and the future of web design.
3. 10:25Because variable fonts can have an interpolated range of values, we can create fluid variations
4. 12:01GRASS

" related talks

• 30mVariable Fonts and the Flexible Nature of Screens and DevicesMandy Michael · JSConf.Asia 2019
• 33mVariable Fonts: WTF?Bianca Berning · Pixel Pioneers Bristol 2022
• 32mAre variable fonts the future of web typography?Bram Stein · CSS-Minsk-JS 2018
• 45mVariable Fonts and Responsive TypographyMandy Michael · You Gotta Love Frontend 2020
• 29mVery Responsive Typography with Variable FontsMandy Michael · JSConf Hawaiʻi 2020
• 36mVariable Fonts and Dynamic Typography with CSSJason Pamental · Web Unleashed 2018
• 34mVariable Fonts: The Future of Typography Has Already BegunGiulia Laco · CSS Day 2019
• 20mVariable fonts: a million times the possibilities...Laurence Penney · dotCSS 2017