Typenotion
A font marketplace for buying and downloading premium, commercially-licensed typefaces, built end-to-end from Figma to production.
Live PreviewProject Gallery
Context
The Problem
Designers and brands need typefaces they can legally use in commercial work, but sourcing fonts with clear, reliable licensing is fragmented across marketplaces with inconsistent terms. Typenotion needed a single place to browse, license, and download fonts with commercial rights built in from the start.
My Role
Design
- Designed the browsing, filtering, and font detail experience in Figma
- Structured licensing tiers (Personal, Commercial, Extended, Enterprise) for clarity at checkout
Frontend
- React + Next.js with TypeScript
- Category browsing, search, and font detail pages
- Subscription plan and checkout flows
Backend
- Supabase (PostgreSQL, auth)
- Next.js API routes for licensing and downloads
Infrastructure & DevOps
- Vercel for deployment and edge delivery
- HTTP/2 delivery for fast asset loading
Solution & Process
Design Validation
Designed around three core jobs: browsing fonts by category and style, understanding licensing before purchase, and getting from decision to download in as few steps as possible.
Technical Stack Selection
Built on Next.js and deployed to Vercel for fast, globally-distributed delivery. Supabase provides PostgreSQL for font, license, and subscription data along with authentication, keeping the backend simple to reason about while still handling recurring billing logic.
Technical Decisions & Trade-offs
Chose Supabase over a custom Node/Postgres setup to get authentication and a managed Postgres instance without building that layer from scratch. This mattered for a marketplace where license records and purchase history need to stay consistent and auditable.
