Fontkin
A font pairing tool for designers and developers: 34 curated pairings, live previews and one-click code exports.
Client
Internal Project
Industry
Design Tools
Timeline
Completed
Year
2026
Services
Brand Strategy · UI/UX Design · Design System · Frontend Development · SEO Implementation
01 / The Challenge
Understanding the problem
Choosing typefaces that work together takes time, and the tools for it tend to generate random combinations, list thousands of Google Fonts with little guidance, or stop short of code a developer can use. Fontkin set out to be curated and opinionated: fewer pairings, each chosen for a reason, shown in real layouts and ready to export.
02 / The Approach
How we tackled it
We chose curation over quantity. Each of the 34 pairings was picked by hand for contrast, matching x-heights, mood and the job it suits. The tool is built around three needs: designers want to see type in context, such as interfaces, editorial pages and hero sections; developers want code they can paste; and both want to filter by mood and purpose.
03 / The Solution
What we built
Fontkin has three preview modes (web interface, editorial layout and hero section), a combination builder with controls for weight, size, line height and letter spacing, side-by-side comparison of up to three pairings, and exports in four formats: CSS variables, a Tailwind config, Google Fonts HTML and an AI prompt for design handoff.
Tech Stack
04 / The Outcome
Results & impact
Fontkin is live at fontkin.com, with 34 curated pairings drawn from a library of 57 fonts. Each pairing can be previewed in three layouts, adjusted, compared and exported as code in one click, so a type decision goes from browsing to a working stylesheet without retyping anything.
34
Font pairings
57
Fonts in the library
4
Export formats
3
Preview modes
