Typography & creative coding
Typeface Pairing Studio
Pair, tune and test typefaces across real layouts, then export a responsive type system as CSS.
My role
Product Designer & AI Creative Director
Development Method
- #AI-Native Development
- #Creative Direction
- #Design Systems
Technical Stack
- #React
- #TypeScript
- #CSS
- #Typography
Product Category
- #Typography Tool
- #Creative Playground
- #Interactive Demo
Overview
An interactive typography playground for finding a headline and body pairing that feels right. Visitors can start with a curated direction, swap the two typefaces, tune scale and rhythm, test the pairing across real layouts and export the resulting CSS variables.
How I Built It
Curated Type Library
Selected familiar, resilient typefaces and grouped them by character so every pairing works without a paid font service.
Responsive Type Logic
Built a fluid scale system for display size, body size, line height and tracking, with useful boundaries instead of arbitrary values.
Contextual Previews
Designed landing-page, editorial and product-card views so a pairing can be judged in context before its CSS is copied or downloaded.