Problems solved by OpenType

on YouTube ↗51m

" summary

Live demo shows concrete wins: using optical sizing and variable-font axes to swap glyph detail at different sizes, switching numerals between old‑style and lining for prose vs technical text, enabling tabular numbers and slashed zeros for tables, applying font-variant-position and the OpenType feature scientific inferiors for real superscripts, and using size-adjust / ascent-override to match fallback/code fonts. A web tool "whatcanmyfontdo" analyzes fonts and outputs the exact CSS used — the examples work in the browser.

AI-written summary · about

" chapters (36)

1. 0:00Introduction to OpenType features
2. 1:11What are OpenType layout features
3. 5:03Kerning and ligatures explained
4. 8:17Alternate glyphs and stylistic sets
5. 10:55Essential OpenType features for languages
6. 13:01Variable fonts and their advantages
7. 15:30Dark mode and optical sizing
8. 16:54Creative possibilities with OpenType
9. 17:57Color fonts and their integration
10. 18:17Two ways to use OpenType features
11. 20:25Live coding a newspaper layout
12. 21:28Optical sizing in typography
13. 22:10Enabling discretionary ligatures
14. 23:14Old-style vs lining numbers
15. 24:40Small caps for abbreviations
16. 25:45Proper superscript formatting
17. 27:30Diagonal fractions in technical text
18. 28:12Scientific inferiors for chemical formulas
19. 28:55Tabular numbers for data alignment
20. 30:40Slashed zeros and text alignment
21. 31:21Case-sensitive forms for symbols
22. 32:26Size adjustment for fallback fonts
23. 33:51Code block typography adjustments
24. 35:34Icon sizing with font metrics
25. 36:40Vertical alignment of icons
26. 38:02Analyzing fonts with WhatCanMyFontDo
27. 40:19Q&A on OpenType features and resources
28. 42:04OpenType adoption and education gap
29. 43:29Font loading and feature detection
30. 44:54Superscript reset and font synthesis
31. 45:35OpenType feature wish list
32. 46:41OpenType as programmable fonts
33. 47:03Default OpenType settings for content
34. 47:46OpenType in design tools like Figma
35. 48:29Education and awareness of OpenType
36. 49:11Control and trust in typography design

" related talks

• 28mSyntax Highlight EverythingKenneth Ormandy · Front-Trends 2016
• 48mBetter Type For The WebElliot Jay Stocks · SmashingConf Freiburg 2023
• 29mSyntax Highlight EverythingKenneth Ormandy · CSSConf.Asia 2016
• 36mVariable Fonts and Dynamic Typography with CSSJason Pamental · Web Unleashed 2018
• 20mDynamic Typographic Systems with Variable FontsJason Pamental · dotCSS 2019
• 32mModern Typographic Systems With Variable FontsJason Pamental · CSSConf EU 2019
• 45mOnce Upon a Drop Cap: A Look at Typography as UXJason Pamental · Web Unleashed 2016
• 49mDynamic Typography with Variable FontsJason Pamental · beyond tellerrand Berlin 2019