---
title: Typography resources every builder should know
slug: typography-every-builder-should-know
url: "https://dontmakeitugly.com/collections/typography-every-builder-should-know"
resources:
  - typewolf
  - fontsource
createdAt: "2026-09-02"
updatedAt: "2026-09-03"
---

# Typography resources every builder should know

Where to find a good typeface, how to see it in use, and how to size it properly.

Typography is the cheapest big upgrade available. Same layout, same colours, a better typeface at a consistent scale, and the whole thing reads as designed. These resources take you from "which font" to "what sizes".

## Resources, in order

1. [Typewolf](https://dontmakeitugly.com/resources/typewolf.md) — What's trending in type, with real sites showing each font in use.
   Agent: Limited.
   The best way to pick a typeface is to see it on a real site. Typewolf shows you exactly that, plus what it pairs with. Start with the "Top 10" lists.
2. [Fontsource](https://dontmakeitugly.com/resources/fontsource.md) — Self-host any open-source font with an npm install.
   Agent: Excellent. Install: `npm install @fontsource-variable/inter`
   The cleanest way to self-host fonts outside Next.js (which has next/font). Vite, Astro, SvelteKit: this is the move.

Work down the list in order. Each linked page says what the resource is, why it's here and how an agent can use it.