Typography.supply is a quickly accessible repository for type focused tools. With the huge variety of type focused tools scattered across the web, Tim Brown and I decided to create a single resource. It features two sections – a quickly filterable list of tools and their authors as well as a glossary of typographic terms.

MDN

Design and Information Architecture

Visually, typography.supply speaks to craft by taking queues from largely old hardware tools and advertisements.

Together, we determined the most useful groupings of typographic tools:

  • Identifying type
  • Trying type
  • Working with text
  • Measuring
  • Making typography flex
  • Managing typographic details
  • Reviewing contexts
  • Gauging support
  • Responding to conditions
  • Optimizing font loading
  • Making typefaces

These categories effectively sorted the existing tools and resources that already existed. Working from there, we built them into cards (looking back it would have been ideal to better consider list views, cards, and everything in between) that could be filtered (and match the tool name or author string). Each card contained the tool’s name, author(s) and any related sites.

To promote learning, we opted for an anchor linked glossary to better define typographic nomenclature that might show up in the cards and answer any questions designers might have. Cards can also be tapped and held to mark them for a later visit.

MDN

In Production

Typography.supply was handled as a static site with a static site generator / markdown posts. For a smooth front-end experience, we relied on loading specific fonts asynchronously in tandem with animations, separating CSS per view and caching and prefetching.

Check out typography.supply and learn something new about type!