Typography
Typography is the foundation of visual communication. Good type choices establish hierarchy, improve readability, and set the tone for your entire design system. This collection spans learning resources, tools, and curated font libraries.
Quick Reference
Section titled “Quick Reference”| Resource | Best For | Format |
|---|---|---|
| Typewolf | Font pairing inspiration | Web |
| Typescale | Generating modular scales | Tool |
| Fontsource | Self-hosting fonts via NPM | Library |
| Fonts In Use | Real-world typography examples | Gallery |
Learning Resources
Section titled “Learning Resources”Whether you’re new to typography or refining your craft, these guides cover fundamentals through advanced techniques.
Beginner-Friendly
Section titled “Beginner-Friendly”- A Pocket Guide to Typography — Concise reference for everyday typographic decisions. Print it, keep it at your desk.
- Typography Basics — Covers terminology, anatomy of letterforms, and basic pairing principles.
- Pro Web Type — Free online book by Donny Truong focused on web-specific considerations.
Deep Dives
Section titled “Deep Dives”- Smashing Magazine: Typography Guidelines — Comprehensive reference with historical context and practical advice.
- WebTypography.net — Richard Rutter’s adaptation of Bringhurst’s principles for the web.
- awesome-typography — Community-maintained list covering tools, articles, and resources.
Recommended reading order: Start with the Pocket Guide for quick wins, then work through Pro Web Type for web-specific patterns.
Type Scale Tools
Section titled “Type Scale Tools”Modular scales create harmonious size relationships. These tools help you generate and visualize scales based on ratios like the golden ratio (1.618) or major third (1.25).
| Tool | Features | Export |
|---|---|---|
| Typescale.com | Visual editor, CSS output, dark mode preview | CSS, Tailwind |
| Typescale.io | Minimal interface, quick iteration | CSS |
| Type Scale Tool | Detailed controls, accessibility checks | CSS |
| LGC Type Scale | Integrated with grid calculator | CSS |
| gud-typescale | CLI tool, build integration | JSON, CSS |
Font Libraries
Section titled “Font Libraries”Self-Hosting Solutions
Section titled “Self-Hosting Solutions”Self-hosting fonts improves performance and privacy. These tools make it straightforward:
- Fontsource — NPM packages for 1,500+ open-source fonts. Zero configuration with Vite, Next.js, and Astro.
- google/fonts — Direct access to font files and the issue tracker for Google Fonts.
Curated Collections
Section titled “Curated Collections”- Typewolf Resources — Jeremiah Shoaf’s hand-picked recommendations, updated for 2025.
- Typewolf Book Reviews — The best typography books rated and reviewed.
- Fonts In Use — Searchable archive of typography in real-world applications.
- Type-Ed Resources — Educational materials and practice exercises.
Featured Typefaces
Section titled “Featured Typefaces”A selection of versatile, well-crafted typefaces for UI and editorial work.
Neo-Grotesques
Section titled “Neo-Grotesques”| Typeface | Source | Notes |
|---|---|---|
| Aktiv Grotesk | Adobe Fonts | Dalton Maag’s workhorse, 48 styles |
| Neue Haas Grotesk | Adobe Fonts | The original Helvetica, digitized properly |
| Overused Grotesk | Open Source | Variable font, Swiss-inspired |
Contemporary Sans
Section titled “Contemporary Sans”- Diatype — Dinamo’s sharp, technical sans with extensive language support.
- PP Museum — Humanist warmth meets geometric precision.
Serifs
Section titled “Serifs”- Arnhem — Dutch craftsmanship, excellent for long-form reading.
Variable Fonts
Section titled “Variable Fonts”Variable fonts reduce file size while offering infinite stylistic range along defined axes (weight, width, slant, etc.).
- Voto Serif GX — 3-axis variable version of Noto Serif for experimentation.
- OpenType Feature Freezer — Bake OpenType features into fonts for broader compatibility.
Platform-Specific
Section titled “Platform-Specific”React Native
Section titled “React Native”- Font Scaling Guide — Responsive typography that respects user accessibility settings.
Tailwind CSS
Section titled “Tailwind CSS”- Typography Playground — Live editor for Tailwind’s prose classes.
Tools & Utilities
Section titled “Tools & Utilities”- pdf-craft — Extract and convert typography from scanned book PDFs.
- Microsoft Typography Docs — Technical reference for OpenType and font rendering.
Free Downloads
Section titled “Free Downloads”- 20 Free Design Ebooks — Collection including typography-focused titles.
- No18 Brand Style Guide — Real-world example of typography in a brand system.