Better Type For The Web
summary
Covers six practical fixes: use OpenType alternates (stylistic sets, discretionary ligatures, tabular/oldstyle figures, small caps) and enable the optical-size axis (Figma and many browsers map font-size to optical size by default); prefer grade axes to match light/dark surfaces; adopt variable fonts (they save weight once using 3–4 styles) but avoid the inheritance bug by re-declaring axes or using CSS custom properties; try fluid scales with utopia.fyi-generated variables; watch font metrics and line-height and consider the proposed textbox-trim.
AI-written summary · about
chapters (10)
- 0:00Introduction and background
- 1:11Web typography evolution
- 8:52OpenType features explained
- 16:10Optical size in fonts
- 19:39Understanding grade in typography
- 22:40Variable fonts deep dive
- 26:25Line height challenges
- 29:17Fluid type scales
- 33:09Key takeaways and summary
- 37:48Q&A session
related talks
51mProblems solved by OpenType
42mTypography for Frontends
20mDynamic Typographic Systems with Variable Fonts
28mSyntax Highlight Everything
46mRESPONSIBLE RESPONSIVE TYPOGRAPHY: A CRASH-COURSE ON VARIABLE FONTS AND ACCESSIBILITY
30mWhen East meets West: web typography and how it can inspire modern layouts
46mResponsive Typography
31mEast Meets West: Web Typography and Modern Layouts