Typography is the foundation of any design system
summary
Claim: typography is the technical backbone of a design system not just a style choice. Examples include using a grade axis in Roboto Flex to match light and dark surfaces, a variable Deulara with a optical size axis to let browsers pick appropriate cuts, the Mitt Romney web font failure where an italic never loaded and broke meaning, Figma’s vertical trim workflow and the upcoming textbox-trim CSS spec, and practical fluid type scales from utopia.fyi that interpolate between breakpoints.
AI-written summary · about
chapters (9)
- 0:00Typography introduction
- 3:31Typography in design systems
- 7:23Type grade in print and digital
- 10:14Optical sizing in UI
- 11:58Proper italics importance
- 14:46Line height in type systems
- 20:24Fluid type scales
- 22:30Typography foundation
- 24:13Closing thoughts
related talks
45mDesign System Typography: Intent, Application, and Scale
01h 18mType Is Design:Fix Your UI with Better Typography and CSS
01h 03mFonts, Form and Function: A Primer on Digital Typography
53mTypography on the web is like other typography only more interesting
42mTypography for Frontends
50mType-setting in CSS: Using typography to enhance your design
39mEngineering Beautiful and Accessible Text
32mModern Typographic Systems With Variable Fonts