✳ Typographic Deck

A new way to discover typography.

Typographic Deck turns a physical card deck concept (the Baralho Tipográfico Figma design) into an explorable typography universe: 94 typefaces and 6 educational chapters laid out as playing cards on an infinite canvas. You wander through the deck, flip cards to read each typeface's story, learn the craft from chapter cards mixed into the pile, collect favourites, compare faces side by side, share deep links, and print the whole thing back into a physical deck.

Every "Aa" on every card is a live webfont — not an image. That's the whole point: the site is built with DOM + CSS transforms instead of WebGL precisely so the type stays real, crisp at any zoom, and rendered by the same font files you'd ship in production.

How it works

Gesture	Action
Drag	Pan around the deck (with momentum physics)
Scroll / pinch	Zoom towards the cursor
Double-click empty space	Reset to the full-deck view
Click a card	Flip it — if you're far away, the camera glides in first

First-time visitors get a short welcome overlay; shared links skip it and land straight on the card.

The cards

Each typeface card follows the original Figma design at 2× resolution. The front is a specimen: name and designer set in the typeface itself, the available weights, and a giant "Aa" on the card's colour. The back holds a design quote typeset in that face, a short story about the typeface, and spec rows — Type, Legibility, Style, Sentiment, Format — plus:

• A type tester — type your own words and see them live in that typeface
• ⇆ Compare — pick two cards for a side-by-side comparison
• ↗ Share — copies a deep link (/?card=inter) that opens the deck zoomed into that card, flipped
• + Collect — saves the card to your collection (localStorage, no account)
• A clickable source link that opens the font on Google Fonts / Fontshare / Fontsource in a new tab

Compare mode

Two typefaces, one shared sample text, specs aligned. Deep-linkable too: /?compare=playfair-display,inter.

Learn — the educational chapters

Six white chapter cards are shuffled into the deck like rare pulls (find the &, g, Aa, ¶, @ and fi). Together they form a small typography course:

1. A brief history — typeface vs typography, and digital type in eight key dates
2. Anatomy of type — a live SVG-annotated specimen (baseline, x-height, cap height…) with the essential vocabulary
3. Classification — old-style, didone, slab, grotesque, geometric and mono, shown with live specimens from the deck
4. Best practices — kerning, tracking, leading; legibility vs readability
5. People to follow — Rasmus Andersson, Matthew Carter, Erik Spiekermann, Zuzana Licko, Tobias Frere-Jones, Jessica Hische
6. Essential reading — from Thinking with Type to Bringhurst's Elements

The ✳ Learn chip in the nav spotlights just the chapters.

Print the deck

The ⎙ Print button turns the visible cards (respecting your active filter — print just the monos, or just your collection) into a PDF via the browser's print dialog: front + back pairs at playing-card size (59.5 × 88.9 mm), three per A4 page, with card borders as cut guides.

Design details

• Colours are Pantone mixes, not formulas. Each of the 13 rainbow columns interpolates from a dusty light anchor through a signature Pantone colour to a deep one — Viva Magenta 18-1750, Living Coral 16-1546, Illuminating 13-0647, Greenery 15-0343, Turquoise 15-5519, Classic Blue 19-4052, Very Peri 17-3938, Ultra Violet 18-3838, Radiant Orchid 18-3224 and friends.
• Fonts from three sources. Google Fonts (css2 API), Fontshare (Satoshi, General Sans, Clash Display, Zodiak, Boska…) and Fontsource via jsDelivr (Iosevka, Cascadia Code). One stylesheet per family, so a single failure never breaks the deck.
• Motion follows Emil Kowalski's guidance. Strong custom curves (cubic-bezier(0.23,1,0.32,1) for input responses, cubic-bezier(0.77,0,0.175,1) for the card flip and camera glides), press feedback on every button, hover states gated behind @media (hover: hover), exits faster than enters, and prefers-reduced-motion support. Direct manipulation (wheel zoom, drag) is never animated.
• Cards are authored at 2× the Figma size (486 × 726 px) so text stays sharp when you zoom in.

Running it

npm install
npm run dev      # → http://localhost:5173
npm run build    # type-check + production build

Vite + React + TypeScript + Framer Motion. No backend — it ships as a static site.

Project structure

src/
  data/typefaces.ts     # 94 typefaces, Pantone palettes, deck layout
  data/chapters.ts      # the 6 Learn chapters
  hooks/usePanZoom.ts   # drag/inertia/pinch/wheel-zoom camera
  components/           # Card, ChapterCard, CompareView, PrintSheet, chrome
  lib/fonts.ts          # per-family font loading + provider links

Credits

• Deck design: Baralho Tipográfico (Figma)
• Typefaces belong to their designers and foundries, served by Google Fonts, Fontshare and Fontsource under their respective open licences
• Quotes: Steve Jobs, Ellen Lupton, Massimo Vignelli, Jan Tschichold, Robert Bringhurst, Dieter Rams, Saul Bass, Charles Eames, David Carson, Matthew Carter, and friends