A Web Tool That Pairs Fonts With Perfect Chemistry.
1
1a
2
2a
3
3a
2
2a
3
3a
1a
1b
1c
1d
"Typetandem functions as a visual playground that draws in the learning designer from scroll one, shifting the focus from casual matching to meaningful pairing, each grounded in real typographic insight."
1a
1b
1c
1d
1b
1c
"Typetandem functions as a visual playground that draws in the learning designer from scroll one, shifting the focus from casual matching to meaningful pairing, each grounded in real typographic insight."
1d
"Typetandem functions as a visual playground that draws in the learning designer from scroll one, shifting the focus from casual matching to meaningful pairing, each grounded in real typographic insight."
A visual playground that draws in the
learning designer from scroll one, shifting
the focus from casual matching to
meaningful pairing, each grounded in real
typographic insight.
Description
A Self-initiated project addressing a common design challenge: pairing typefaces with thoughtfully and with taste. While dedicated tools exist, few offer real-time feedback or provide material for the users to learn. Built on the Google Fonts library, Typetandem is made for designers who want to understand how font pairing works and use it intentionally. Its core features include visual feedback, smart filtering, and open-source resources that support active learning.
Introduction
The idea came from realizing how dense and rule-heavy typography can be and how much that impacts visual communication. No wonder font pairing often feels tricky. Sure, many designers stick to one great typeface, but there are plenty of cases where a second is helpful or even essential. And if picking one font is already nuanced, pairing two adds a whole new layer. I wanted to break that down, so I started by gathering input from a small group of designers (both students and professionals) to understand how they use existing tools.
Research insights
Almost half of the respondents uses some kind of font pairing tool or service weekly or daily
Adobe Fonts and its pairings feature is the most popular among respondents
Very few use the suggested pairings in their projects without first seeking for feedback or comparing them to real world examples
Many of the respondents said they would value the ability to adjust font pairings through a more in-depth filter system
More than half of the respondents would enjoy playing a game-like tool that encourages font-pairing practicing with a reward/point based system.
Kupferschmid's matrix
To dig deeper, I looked for ways to make font pairing feel more logical and less guesswork. That’s when I found Indra Kupferschmid’s (a german Designer and Teacher) Font Pairing Matrix, a system that categorizes typefaces using clearer, more consistent criteria than most platforms. Labels like Script or Medieval are familiar, but they often reflect bias or oversimplify how type really works. Kupferschmid’s matrix offers a more structured and objective approach. Here’s how it’s built:
Columns
Columns represent the three types of form model a typeface can fall into:
Dynamic, easy to spot because of the open apertures and tilted axis
Rational, with more closed apertures and a vertical axis
Geometric, which letterforms follow basic geometric shapes
Rows
Rows represent the four possible combinations of contrast and serifs a typeface can acquire:
Contrasting Sans, with a variable stroke and no serifs
Contrasting Serifs, with a variable stroke and serifs
Linear Sans, with consistent stroke and no serifs
Linear Serifs, with a consistent stroke and serifs
How Typetandem works
Images 1-1a show how the matrix is integrated into Typetandem. Right above the matrix, two cards highlight the typefaces’ letterforms, one for each font. In this instance, the small caps “a” is used as a sample. It’s one of the features that makes Typetandem a more logical way to learn font pairing. Another is the Insights and Resources panel, which appears with each new pairing and shares helpful info about the typefaces or tips on how to use them together. This shifts how users think about pairing, and it’s something I began exploring after mapping the user flows of common font pairing platforms. Most of these tools fall into two categories: those built specifically for pairing, like the Monotype Font Pairing Generator, and those where pairing is a secondary feature, like Adobe Fonts.
Concept
The tool’s name combines “type” and “tandem”. Beyond the obvious reference to dualism (can’t ride a tandem alone!), the name hints at the idea of pairing and complementarity. It can also be read through its original Latin meaning, “at last” or “finally,” subtly recalling the long, often frustrating search for the perfect font combination. The association is reinforced by the use of biking-themed placeholder text to replace the classic quick brown fox sentence when testing pairings.
Visuals
Visually, Typetandem adopts a single typeface (a rational, linear sans-serif) in two main weights for rhythm and legibility, and labels main actions with a set of custom icons designed to harmoniously complement the typeface. It also relies on color strategically. Since the pairings normally consist of a main and a secondary typeface, two accent colors (a quasi-magenta and a vibrant emerald green) are employed hierarchically: the first labels both the respective typeface and the buttons' active state, while the second identifies the supporting typeface, making its presence way less prominent overall. This emerges, for example, in the tool's right panel, where the user can filter typefaces, as shown below.
First iteration & testing
To review the first prototype, I decided to experiment with a tool I was new to: an AI-powered online usability review. It definitely helped spot usability issues (such as improper or missing icon labeling), as well as more general inconsistencies throughout the layout which I then corrected. Plus, I added a dark theme (image 1d) to test the pairings in both conditions I found this evaluation method pretty helpful in paving the way for more in-depth testing with actual users later on.
Conclusion
Typetandem is fundamentally a personal exploration of a subject I’m interested about: the rise of tools that not only make us more efficient but also educate us on a process, revealing what happens behind the scenes. As AI continues to grow, I feel like we'll likely experience an increasing need for professionals with strong visual skills and a solid understanding of the reasoning behind design choices. In this context, Typetandem could be a small but meaningful step toward fostering a new generation of more conscious, skilled, and hands-on designers who actually understand what’s happening, starting with typography.
Psst—
Let's keep in touch!
© 2025 Andrea Grilli
Description
A Self-initiated project addressing a common design challenge: pairing typefaces with thoughtfully and with taste. While dedicated tools exist, few offer real-time feedback or provide material for the users to learn. Built on the Google Fonts library, Typetandem is made for designers who want to understand how font pairing works and use it intentionally. Its core features include visual feedback, smart filtering, and open-source resources that support active learning.
Introduction
The idea came from realizing how dense and rule-heavy typography can be and how much that impacts visual communication. No wonder font pairing often feels tricky. Sure, many designers stick to one great typeface, but there are plenty of cases where a second is helpful or even essential. And if picking one font is already nuanced, pairing two adds a whole new layer. I wanted to break that down, so I started by gathering input from a small group of designers (both students and professionals) to understand how they use existing tools.
Research insights
Almost half of the respondents uses some kind of font pairing tool or service weekly or daily
Adobe Fonts and its pairings feature is the most popular among respondents
Very few use the suggested pairings in their projects without first seeking for feedback or comparing them to real world examples
Many of the respondents said they would value the ability to adjust font pairings through a more in-depth filter system
More than half of the respondents would enjoy playing a game-like tool that encourages font-pairing practicing with a reward/point based system.
Kupferschmid's matrix
To dig deeper, I looked for ways to make font pairing feel more logical and less guesswork. That’s when I found Indra Kupferschmid’s (a german Designer and Teacher) Font Pairing Matrix, a system that categorizes typefaces using clearer, more consistent criteria than most platforms. Labels like Script or Medieval are familiar, but they often reflect bias or oversimplify how type really works. Kupferschmid’s matrix offers a more structured and objective approach. Here’s how it’s built:
Columns
Columns represent the three types of form model a typeface can fall into:
Dynamic, easy to spot because of the open apertures and tilted axis
Rational, with more closed apertures and a vertical axis
Geometric, which letterforms follow basic geometric shapes
Rows
Rows represent the four possible combinations of contrast and serifs a typeface can acquire:
Contrasting Sans, with a variable stroke and no serifs
Contrasting Serifs, with a variable stroke and serifs
Linear Sans, with consistent stroke and no serifs
Linear Serifs, with a consistent stroke and serifs
How Typetandem works
Images 1-1a show how the matrix is integrated into Typetandem. Right above the matrix, two cards highlight the typefaces’ letterforms, one for each font. In this instance, the small caps “a” is used as a sample. It’s one of the features that makes Typetandem a more logical way to learn font pairing. Another is the Insights and Resources panel, which appears with each new pairing and shares helpful info about the typefaces or tips on how to use them together. This shifts how users think about pairing, and it’s something I began exploring after mapping the user flows of common font pairing platforms. Most of these tools fall into two categories: those built specifically for pairing, like the Monotype Font Pairing Generator, and those where pairing is a secondary feature, like Adobe Fonts.
Concept
The tool’s name combines “type” and “tandem”. Beyond the obvious reference to dualism (can’t ride a tandem alone!), the name hints at the idea of pairing and complementarity. It can also be read through its original Latin meaning, “at last” or “finally,” subtly recalling the long, often frustrating search for the perfect font combination. The association is reinforced by the use of biking-themed placeholder text to replace the classic quick brown fox sentence when testing pairings.
Visuals
Visually, Typetandem adopts a single typeface (a rational, linear sans-serif) in two main weights for rhythm and legibility, and labels main actions with a set of custom icons designed to harmoniously complement the typeface. It also relies on color strategically. Since the pairings normally consist of a main and a secondary typeface, two accent colors (a quasi-magenta and a vibrant emerald green) are employed hierarchically: the first labels both the respective typeface and the buttons' active state, while the second identifies the supporting typeface, making its presence way less prominent overall. This emerges, for example, in the tool's right panel, where the user can filter typefaces, as shown below.
First iteration & testing
To review the first prototype, I decided to experiment with a tool I was new to: an AI-powered online usability review. It definitely helped spot usability issues (such as improper or missing icon labeling), as well as more general inconsistencies throughout the layout which I then corrected. Plus, I added a dark theme (image 1d) to test the pairings in both conditions I found this evaluation method pretty helpful in paving the way for more in-depth testing with actual users later on.
Conclusion
Typetandem is fundamentally a personal exploration of a subject I’m interested about: the rise of tools that not only make us more efficient but also educate us on a process, revealing what happens behind the scenes. As AI continues to grow, I feel like we'll likely experience an increasing need for professionals with strong visual skills and a solid understanding of the reasoning behind design choices. In this context, Typetandem could be a small but meaningful step toward fostering a new generation of more conscious, skilled, and hands-on designers who actually understand what’s happening, starting with typography.
A Web Tool That Pairs Fonts
With Perfect Chemistry.
A Web Tool That Pairs Fonts
With Perfect Chemistry.
2a
2
1