Design System Typography: Intent, Application, and Scale
summary
Design system typography uses tokenized variables and a few simple rules to serve different contexts rather than one universal scale. It ties Figma styles to code via the figma tokens plugin and CSS custom properties, uses variable fonts (Roboto Flex) to tweak width and weight (dark mode multiplier ≈0.985), and uses clamp for responsive scaling. A Drupal-based Rhode Island platform ships one mockup to Pattern Lab and powers ~50 agency sites in six months; the same token approach scales across dozens of product designers and hundreds of engineers.
AI-written summary · about
chapters (17)
- 0:00Introduction and personal update
- 5:36Design systems and typography intent
- 10:14State of Rhode Island case study
- 12:20Chewie’s typography challenges
- 16:53Responsive typography with clamp
- 18:38Information vs content forward design
- 21:07Product forward layout adjustments
- 23:36Starting with intent in typography
- 26:26Resources and closing remarks
- 28:11Q&A: Typography in enterprise tables
- 29:38Q&A: Chirp vs application team components
- 31:05Q&A: Team structure and platform support
- 32:51Q&A: Enforcing design token usage
- 35:01Q&A: Design system ROI and maintenance
- 37:24Q&A: Preventing system deterioration
- 39:52Q&A: Onboarding new teams
- 42:19Q&A: Hiring designers for design systems
