Syntax Highlight Everything
summary
Shows how OpenType features (20 years old) let designers mark content beyond color using CSS and a tiny JS/CSS library called utility-opentype available on npm; demonstrates real small caps vs fake scaled caps, contextual alternates and discretionary ligatures for handwritten or stencil effects, and tabular numbers for vertically aligned data. Explains practical CSS: prefer font-kerning/kerning auto, use font-variant or font-feature-settings fallbacks (tabular nums needs Firefox 34+ support historically), and gives a ready-to-use class-based workflow.
AI-written summary · about
chapters (14)
- 0:00Intro
- 6:13Punctuation
- 9:54ligatures
- 10:52discretionary ligatures
- 11:42contextual alternates
- 13:06language considerations
- 13:52stylistic alternates
- 16:00case sensitive forms
- 16:59small capitals
- 17:50fake small capitals
- 20:14lining numbers
- 21:17proportional tabular numbers
- 23:16choosing a typeface
- 24:23tabular numbers
related talks
51mProblems solved by OpenType
48mBetter Type For The Web
29mThe State of WebFonts
30mWhen East meets West: web typography and how it can inspire modern layouts
20mDynamic Typographic Systems with Variable Fonts
51mTypography on the Web
32mTypesetting East Asian languages on the web
42mTypography for Frontends