A web tool that pairs fonts like a typographer would — and tells you why.
Self-initiated (2026)
⚡ Interactive prototype. Try it out!
This is a web-based font pairing generator built on the Google Fonts API. It differentiates itself from similar tools by using measurable typographic variables to pair fonts, and includes an educational guide that explains the logic behind each combination.
Role: concept and research, UX, UI, front-end development with Claude Code, manual refinement
Tools: Figma, Claude Code, Google Fonts API
Research form (10-99 respondants), question 4
THE PROBLEM
Most font pairing advice online falls into one of two groups: vague rules("mix a serif with a sans-serif") or aesthetic mood boards with no explanation of why the combinations work. Tools like Google Fonts' own pairing suggestions use labels like "old style", "handwritten", or "high-tech", subjective tags that describe feeling but teach you nothing about the fundamental structure of a typeface. I kept running into this when working on projects. I'd find a font I liked, spend an hour hunting for something that paired well with it, and still feel like I was guessing. The more I read about typography, the more it became clear that the problem wasn't taste, it was that I lacked a proper framework for reading typefaces structurally. That's when I found out about the Font Matrix, a system developed by typographer Indra Kupferschmid and featured in a Pimp my Type article by Oliver Schöndorfer. The system describes typefaces across three objective variables: form model (dynamic, rational, or geometric), stroke contrast (contrasting or linear), and terminals (serif or sans). Pairings that share a form model or contrast sharply across all three axes tend to work. Pairings that look superficially similar but differ at the structural level tend not to. I wanted to build a tool around this system, one that made the logic visible rather than hiding it behind a "generate" button.
Research form, question 8
THE APPROACH
The first thing I did was classify a database of Google Fonts according to the three variables. This meant actually studying each typeface, looking at aperture openness, axis tilt, stroke transition, terminal style. It took awhile, and some fonts sit in genuinely ambiguous territory (Roboto is a good example, landing between dynamic and rational depending on who you ask). For those I made a call and documented it. The pairing algorithm avoids what Kupferschmid identifies as the "bad match": fonts that share the same stroke character and terminals but differ in form model. These look deceptively similar on the surface while being structurally incompatible underneath. Every generated pair either shares a form model (harmonic) or contrasts across multiple axes (balanced or dynamic).The guide panel was the part I spent the most time on. It went through several iterations before it felt right. Early versions showed the typographic variables as tags sitting underneath each font in the preview panel — which meant users were looking at two separate lists of labels with no visible relationship between them. Moving the variables into the guide and framing them as a comparison table was the shift that made the logic readable at a glance. You can see immediately which axes contrast and which align.The guide structure ended up as: — Pairing name and type badge (Dynamic / Balanced / Harmonic, with a contrast score out of 3) — Contrast matrix showing both fonts side by side across all three axes — A combined summary sentence describing the relationship, not the fonts individually — Typographic specimen cards showing the letterforms in context — A "Why does it work?" explanation tailored to the specific combination — Suggested headline and body useGetting the UI to feel clean and intentional was honestly the hardest part.A tool like this lives or dies by legibility — if the interface competes withthe fonts it's supposed to showcase, it fails. I went through a lot ofiterations on spacing, hierarchy, and how much information to show at once.The dark background was a deliberate choice: it keeps the focus on thetypography and gives the accent colours room to work without feeling noisy.
Research form, question 10
THE RESULT
The tool generates font pairings across a database of ~55 Google Fonts, classified and scored against the Font Matrix system. Users can lock either font and regenerate the other, swap the pair, resize previews, and edit the sample text directly. The guide updates with every new pair, explaining the structural relationship in plain language. The feature I'm most satisfied with is the contrast matrix. It makes something that usually lives in a designer's intuition — "these two feel right together"— into something you can actually point at and read. I think that's more useful than any mood board.
CONCLUSION
Working on this project reinforced something I keep coming back to as a designer: the most useful tools are the ones that make their own logic transparent. The goal was never just to pair fonts, it was to give someone enough understanding that eventually they wouldn't need the tool at all.
