Dynamic Typographic Systems with Variable Fonts

on YouTube ↗20m

" summary

Explains how variable fonts let one file act as many and pair with CSS custom properties and calculations to create scalable, componentized typography; demonstrates the optical size axis and width/weight axes in real layouts; cites a 50% comprehension boost for a crowding subgroup when increasing word and line spacing; shows progressive enhancement (IE11 gets static fonts), a Drupal 8 pattern library deployed across ~40 state sites serving millions, and Google Fonts rolling out variable fonts like Oswald at ~150 million requests/day.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 10:33create different color palettes
3. 13:30put a little accessibility panel on our websites
4. 18:27starting to roll out support for variable fonts

" related talks

• 32mModern Typographic Systems With Variable FontsJason Pamental · CSSConf EU 2019
• 36mVariable Fonts and Dynamic Typography with CSSJason Pamental · Web Unleashed 2018
• 49mDynamic Typography with Variable FontsJason Pamental · beyond tellerrand Berlin 2019
• 42mTypography for FrontendsElena Ramírez · FrontFest 2020
• 45mVariable Fonts and Responsive TypographyMandy Michael · You Gotta Love Frontend 2020
• 46mReal Editorial Design on the Web with Variable FontsJason Pamental · Developer Summit 2020
• 33mVariable Fonts and the Future of Web DesignJason Pamental · Web Unleashed 2017
• 33mConquer Variable Web TypographyOliver Schöndorfer · Beyond Tellerrand Berlin 2018