Font pairing and typography resources
Choose type with a purpose. Explore font pairings, serif and sans serif styles, and ways to document typography for a consistent product.
Live React previews. Copyable code. Made for your next product.
Start here.
How to write a design.md file: a step-by-step guide
Write a design.md file with product context, design tokens, component rules, and a reusable template. Check it against a real screen.
How to choose font pairings for a product interface
Choose a font pairing using real UI specimens, role assignments, fallback checks, and a practical typography specification.
Serif vs. sans serif: how to choose for your interface
Compare serif and sans serif fonts using product tasks, realistic specimens, and a decision checklist instead of style stereotypes.
Explore fonts & typography.
5 resources to explore
Fonts & typography 5
Choose typefaces, pair fonts, and build a type scale.
How to write a design.md file: a step-by-step guide
Write a design.md file with product context, design tokens, component rules, and a reusable template. Check it against a real screen.
How to choose font pairings for a product interface
Choose a font pairing using real UI specimens, role assignments, fallback checks, and a practical typography specification.
Serif vs. sans serif: how to choose for your interface
Compare serif and sans serif fonts using product tasks, realistic specimens, and a decision checklist instead of style stereotypes.
How to create a UI type scale with CSS examples
Create a practical UI type scale, assign semantic text roles, and test size, weight, line height, and responsive behavior.
Font weight, border width, and icon strokes: a UI guide
Choose font weights, border widths, and icon strokes with a live specimen, CSS examples, and practical hierarchy checks.
Give your workflow
a new set of skills.
Reusable AI skills from the TDP team. Explore the collection and find a practical starting point for your next project.
Explore the skills repo