Typography for Frontends
summary
Variable fonts (introduced in 2016 with backing from Google, Adobe, Microsoft and Apple) let you replace multiple font files with a single file and pick intermediate weights (examples like 443 or 756, ranges such as 500–800), reducing requests and download size. The talk covers registered variable axes (font-weight, font-stretch, font-style) and custom axes via font-variation-settings, optical sizes, concrete OpenType features (tabular numbers, oldstyle, frac, stylistic sets), and practical CSS tips (use clamp() for fluid typography, use ch for ideal line width ~38–45). It also cites estimated adoption timelines of about 8–10 years.
AI-written summary · about
chapters (20)
- 0:00Start
- 7:15Font weight
- 7:27Oblique
- 7:41Italic
- 8:12Optical sizes
- 12:19Grade
- 16:12Proportional numbers
- 16:33Tabular numbers
- 17:28Lining numbers
- 17:59Old Style numbers
- 18:43Fractions
- 19:13Stylistic sets
- 20:03Small caps
- 20:24Ordinals
- 20:37Contextual alternatives
- 21:16Ornaments
- 21:27OTF list
- 24:33Font size
- 29:08Optimal line height
- 30:03Line width
related talks
34mVariable Fonts: The Future of Typography Has Already Begun
33mVariable Fonts: WTF?
20mDynamic Typographic Systems with Variable Fonts
32mAre variable fonts the future of web typography?
37mVariable Fonts — practical Guide
33mVariable Fonts and the Future of Web Design
32mModern Typographic Systems With Variable Fonts
33mConquer Variable Web Typography