Variable Fonts and Dynamic Typography with CSS

on YouTube ↗36m

" summary

Variable fonts reduce many font files to one usable asset and let CSS actually modulate typography: CSS custom properties, calc and font-variation-settings drive axes like weight, width, grade, optical size and ascender/descender. Demos run live in browsers (Firefox shipped support) and a Monotype example packs weight 1–900 plus italics into 84 KB single font, enabling fluid scaling across viewports, better accessibility (night-grade), and responsive layouts; Adidas prototypes show a width axis 0–1000 and InDesign tooling that works.

AI-written summary · about

" chapters (11)

1. 0:00Intro
2. 3:23Running in the browser
3. 4:10Looking backwards
4. 5:52System refinement
5. 6:35Elements of Typography
6. 10:27Web Fonts
7. 13:04Design Systems
8. 16:24Design for the Average
9. 17:40Variable Fonts
10. 20:41Type Foundry
11. 28:01CSS Variables

" related talks

• 45mVariable Fonts and Responsive TypographyMandy Michael · You Gotta Love Frontend 2020
• 20mDynamic Typographic Systems with Variable FontsJason Pamental · dotCSS 2019
• 33mVariable Fonts: WTF?Bianca Berning · Pixel Pioneers Bristol 2022
• 19mVariable Fonts and the Future of Web DesignMandy Michael · dotCSS 2018
• 49mDynamic Typography with Variable FontsJason Pamental · beyond tellerrand Berlin 2019
• 32mModern Typographic Systems With Variable FontsJason Pamental · CSSConf EU 2019
• 30mVariable Fonts and the Flexible Nature of Screens and DevicesMandy Michael · JSConf.Asia 2019
• 34mVariable Fonts: The Future of Typography Has Already BegunGiulia Laco · CSS Day 2019