Dynamic Typography with Variable Fonts

on YouTube ↗49m

" summary

Modern CSS plus variable fonts produce concrete results: demos use custom properties, calc and grid to auto‑scale type across breakpoints; variable fonts cut payloads (example: almost 300 KB → 84 KB, 960 KB → 233 KB) and reduce requests (seven → two); a Google proof‑of‑concept incremental transfer demo drops a 33 KB font to 11.2 KB for first paragraphs and adds only ~5 KB for the rest; CodePen and live pages (pattern‑library deployed across ~40 Georgia sites) prove it works.

AI-written summary · about

" chapters (12)

1. 0:00Introduction
2. 3:10Why Type
3. 4:52Typography Responsive
4. 7:16Variable Fonts
5. 12:42Friction
6. 17:28Dark Mode
7. 31:21CSS
8. 37:00Google Fonts
9. 38:36Odysseus
10. 39:15Oswald
11. 41:52Access Praxis
12. 43:48Progressive Font Enrichment

" related talks

• 20mDynamic Typographic Systems with Variable FontsJason Pamental · dotCSS 2019
• 36mVariable Fonts and Dynamic Typography with CSSJason Pamental · Web Unleashed 2018
• 32mModern Typographic Systems With Variable FontsJason Pamental · CSSConf EU 2019
• 45mVariable Fonts and Responsive TypographyMandy Michael · You Gotta Love Frontend 2020
• 46mReal Editorial Design on the Web with Variable FontsJason Pamental · Developer Summit 2020
• 33mConquer Variable Web TypographyOliver Schöndorfer · Beyond Tellerrand Berlin 2018
• 19mVariable Fonts and the Future of Web DesignMandy Michael · dotCSS 2018
• 32mAre variable fonts the future of web typography?Bram Stein · CSS-Minsk-JS 2018