Typography decisions compound. The typeface you choose for a brand shows up in every touchpoint: the website, the pitch deck, the email footer, the product UI. Getting it right early saves a lot of painful retroactive fixes.
These resources cover selection, pairing, usage, and the principles behind good typographic decisions.
Learning the Principles
Practical Typography by Matthew Butterick — practicaltypography.com
A complete typography manual available free online. Covers everything from basic rules to professional-level decisions. Butterick is opinionated and precise, which makes the content more useful than generic overviews.
Thinking with Type by Ellen Lupton — thinkingwithtype.com
The standard introductory text for anyone approaching typography from a design background. Covers letter, text, and grid as separate systems.
Google Fonts Knowledge — fonts.google.com/knowledge
Underrated. A collection of articles on type history, classification, choosing and using type. Written accessibly and paired with visual examples throughout.
Finding and Testing Typefaces
Google Fonts — fonts.google.com
Over 1,500 free families. Filter by classification, language support, and number of styles.
Adobe Fonts — fonts.adobe.com
Included with Creative Cloud. Larger library than Google Fonts, with more retail typefaces. Activation syncs directly to desktop apps.
Fontshare — fontshare.com
Free high-quality typefaces from Indian Type Foundry. The library is curated rather than comprehensive, which makes it easier to navigate.
Font Squirrel — fontsquirrel.com
Free fonts cleared for commercial use. The quality varies, but the commercial licensing clarity is useful.
Pairing and Matching
Fonts In Use — fontsinuse.com
A searchable archive of typography in real-world use. Look up a typeface and see where it has been used.
Typewolf — typewolf.com
Site-of-the-day style curation focused on type. The pairing recommendations are practical and the site specimen pages show typefaces in context.
Archetype — archetypeapp.com
A tool specifically for building and previewing type pairings. Set your scale, see the pairing in context, export the CSS variables.
Variable Fonts
Variable Fonts — v-fonts.com
Directory of variable fonts with interactive axis sliders. The best way to understand what variable font axes actually do.
Axis-Praxis — axis-praxis.org
Similar to v-fonts but with more technical detail on axes.
Type Scale and Spacing
Typescale — typescale.com
Generate a modular type scale from a base size and ratio. Exports as CSS custom properties.
Utopia — utopia.fyi
Fluid type and space scales. The scale adjusts smoothly between defined viewport sizes rather than jumping at breakpoints.
Typography is one of those areas where time spent learning principles pays back more than time spent collecting references. Spend an afternoon with Practical Typography before you go deep on any other resource here.
Discussion
Loading comments...