How do I generate a font pairing without guessing whether it actually works?
Open TypeDuo, click Generate, and you get a heading, subheading, and body font with a one-sentence explanation of what makes that trio work. No sign-up, no paywall. Lock the slot you like, regenerate the rest, then copy the CSS and the Google Fonts embed straight into your project. The full loop usually takes under ninety seconds.
Most free font pairing tools stop at the output. They show you a combination and leave you to decide whether it's good. That's fine if you trained as a designer. If you're a frontend developer or an indie maker shipping a side project this weekend, it's the wrong kind of freedom. TypeDuo is built for the second group.
What makes two fonts pair well together?
A pairing works when the fonts differ enough to create a visible hierarchy but share enough underlying structure to feel like they belong in the same project. Typographers talk about this using specific properties: x-height, stroke contrast, classification (serif, sans-serif, geometric, humanist, transitional), and weight balance. Two fonts with similar x-heights but different classifications usually pair well. Two fonts from the same classification often feel too similar. Two fonts with wildly different proportions tend to clash.
TypeDuo's classification-based generator uses these rules when it builds a trio. The heading slot and the body slot come from different classification families so there's real contrast between them. The rationale line below the preview names the specific property that makes the pairing work. You see something like "The transitional serif heading balances the geometric sans body because their x-heights align while their terminals provide clear contrast." Now you know what to look for next time.
How do I know if a font pairing will work on my actual content?
The best check is to put your real copy in the preview. Every text slot in TypeDuo is editable in place. Click the heading, type your product name. Click the body, paste a paragraph from your landing page draft. The preview updates in the generated font without triggering a new pairing, so you can read through and see whether the trio handles your content before you commit to it.
Placeholder Latin text flatters almost any font. Real product copy exposes problems. A display face that looks great in "The quick brown fox" can feel noisy under a three-line product description. Ten seconds with your own content catches that.
Can I use Google Fonts together on my website?
Yes, and TypeDuo is designed around that. The curated library is a subset of about 250 to 350 Google Fonts selected for pairing quality and loading performance. The code panel outputs a Google Fonts link import that loads all three fonts and CSS font-family declarations for the heading, subheading, and body selectors. Paste the link into your head, drop the CSS into your stylesheet, done.
The library is curated rather than full-catalog because Google Fonts has over 1,500 families and most of them are specialty display faces or script fonts that don't work as body copy. A 250-font library filtered for web use produces better pairings more often and keeps the generator focused on fonts you'd actually ship.
How do I lock a font I like and keep iterating?
Every slot has a lock icon. Click it to freeze that font. When you regenerate, only the unlocked slots change. Lock two slots and only the third one shifts. Lock all three and nothing changes, which is a useful state when you want to re-read the rationale or copy the current CSS.
This is the workflow most developers settle into. Generate until one slot feels right, lock it, keep generating until a second slot clicks, lock it, finish off the trio. You can also skip the generator with the font browser dropdown on each slot, search for a specific family, and let TypeDuo's pairing logic work around a font your brand already requires.
What about the existing font pairing generators?
There are a few. Each solves part of the problem.
Fontjoy uses deep learning to generate pairings with a contrast slider. It's fast and well-designed, but it doesn't explain the pairings and doesn't export CSS. Fontpair.co has a thousand curated pairings with CSS export behind a paid tier, but there's no generator. Fontpairinggenerator.com has lock-and-regenerate but its pairing logic is random, with no rationale or export.
TypeDuo fills the gap in the middle: generation with a lock-and-regen loop, inline explanation, and CSS export, free and client-side. If you already have a favorite tool and only want the rationale, TypeDuo works fine as a second stop. If you want the whole loop in one place, that's what it's for.
How many fonts should I actually use?
Two or three. A heading font and a body font is enough for most web projects. A third slot for subheadings helps when your hierarchy is deep, like a documentation site or a long-form article template. Four fonts is where things start to feel busy and file size starts to matter. TypeDuo uses three slots because that's the common ceiling and the trio fits the classification logic cleanly.
If you only need two fonts, use the heading and body slots and ignore the subheading. The CSS export still works. Nothing forces you to ship all three.
A related question: should a heading font ever match the body font? Usually not. Matching weights or subtle italics of the same family can work for editorial layouts where the content is the design, but most product sites benefit from visible contrast between heading and body. If you want that matched look, pick one family from the browser dropdown and use different weights per slot; TypeDuo won't fight you on it.
Copy the CSS and keep moving
The tool lives at appcrib.com/typeduo. No account, no email capture. Generate a trio, read the reason it works, lock what you like, regenerate the rest, copy the code. Then go build the thing you were going to build before fonts got in the way.