Variable Fonts and Responsive Typography

on YouTube ↗45m

" summary

Variable fonts let one file act like many and reduce font requests while often matching or beating combined static sizes — e.g. Source Sans variable ~112 KB versus a single static weight 111 KB, subsetting drops it to 26 KB. Demos show CSS axes (wght, wdth, opsz) driven by media queries, JS (viewport-to-weight mapping code), device orientation, microphone volume and the ambient light sensor only in Chrome and Edge; creative animations and responsive logos run as selectable text and perform acceptably.

AI-written summary · about

" chapters (13)

1. 0:00Introduction to variable fonts
2. 1:45How I got into variable fonts
3. 2:46What are variable fonts?
4. 5:30Browser support and fallback
5. 7:06Using variable fonts in CSS
6. 8:38Registered and custom axes
7. 10:52Where to find and test fonts
8. 13:03Performance considerations
9. 17:53Creative design opportunities
10. 20:36Animating and interactive text
11. 27:48Responsive typography and design
12. 31:33JavaScript and input control
13. 39:15Conclusion and resources

" related talks

• 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
• 19mVariable Fonts and the Future of Web DesignMandy Michael · dotCSS 2018
• 33mVariable Fonts: WTF?Bianca Berning · Pixel Pioneers Bristol 2022
• 29mVery Responsive Typography with Variable FontsMandy Michael · JSConf Hawaiʻi 2020
• 49mDynamic Typography with Variable FontsJason Pamental · beyond tellerrand Berlin 2019
• 20mDynamic Typographic Systems with Variable FontsJason Pamental · dotCSS 2019
• 32mModern Typographic Systems With Variable FontsJason Pamental · CSSConf EU 2019