← Typography
02

Choosing Typefaces

The safe answer is boring on purpose

Beginners think choosing a typeface is where the creativity happens. Mostly, it isn’t. For interfaces and the majority of websites, the safest starting point is a neutral sans-serif.

Neutral doesn’t mean bland. It means the type gets out of the way and lets content, spacing and hierarchy do the work. Everything that feels premium runs on quiet, workhorse type.

Websites do get more latitude than apps. Editorial sites, blogs and portfolios can carry real personality — a sharp serif, a distinctive display face — because reading is the whole experience. The more functional and dense the design, the more neutral the type should be.

The same dashboard, three typefaces. Switch between them — only one reads as a real product.

Analytics Export

24,801

Sessions

3.2%

Conversion

£12,940

Revenue

/pricing8,112
/docs/getting-started5,489
/blog/launch-week3,207

One family goes a long way

One family at different sizes and weights is the hardest setup to get wrong. But two fonts is fine — it depends on context. A serif for headings over a sans body is a classic editorial combination. A display face for hero moments over a workhorse sans. A monospace for code and data alongside anything.

If pairing:

  • Give each font a clear job. One for headings, one for body — not mixed use.
  • Pair for contrast, not similarity. Serif with sans works; two similar sans-serifs looks like a mistake.
  • Stop at two. A third font almost never earns its place.

Safe picks

  • Inter — the modern default. Designed for screens, huge weight range, free.
  • Geist — Vercel’s typeface. Similar territory, slightly more character.
  • The system font stack — San Francisco on Apple, Segoe UI on Windows. Zero load time.

Nobody has ever looked at a site set in Inter and thought less of it. For more character, a serif or display face for headings can sit on top of any of these — found with the filters below.

Where to find fonts

  • Google Fonts — the biggest free library. Quality varies wildly, which is exactly why the filters below matter.
  • Fontshare — free fonts from the Indian Type Foundry. Smaller library, much higher hit rate. Some of the best free quality available.
  • Adobe Fonts — included with Creative Cloud. Professional-grade library with proper foundry fonts.
  • Uncut — a curated collection of free contemporary typefaces, leaning modern and characterful.
  • Pangram Pangram — paid foundry popular with design-led brands. Most families offer free trial weights.
  • Klim Type Foundry — premium paid fonts used by some of the best-designed products and publications around.

Free covers most projects. Paid foundry fonts are worth it when the typeface is part of the brand.

How to judge a typeface

Count the weights. Quality families ship five or more weights with italics; junk ships two. Font directories filter by style count — set it high and most of the junk disappears.

Check the x-height. Tall lowercase letters and open spacing mean a font built for reading at small sizes. Headline fonts used for body text is why some sites feel cramped no matter what else changes.

The same paragraph, both at 14px. X-height decides whether small text survives.

Tall x-height — built for screens

Your trial ends in 14 days. Add a payment method in settings to keep your projects, or export everything from the billing page at any time.

Headline font at body size

Your trial ends in 14 days. Add a payment method in settings to keep your projects, or export everything from the billing page at any time.

Sort by popularity. Unromantic but effective — if thousands of designers keep choosing a font, it’s probably good. Most useful when hunting personality fonts, where taste is harder to trust.

Steal from products that care. Inspect well-designed sites and see what they run. The fastest way to build taste.

The takeaway

One neutral sans with plenty of weights covers most projects. Add a second font when the context calls for it and it has a clear job. Either way, the typeface is raw material — the lessons that follow are where the design happens.

Unlock the full course

Every module, every lesson, every interactive demo — plus all future modules as they're added. One purchase, lifetime access.

Get the course

Already a member? Log in