The most common pairing on the 407 sites we analyzed is Plus Jakarta Sans with Inter, on 3 of them. A pairing here means two different typefaces that are the biggest font for different jobs on the same site: a heading font with a different body font, or a body font with a different code font.
| Pairing | As | Sites | Examples |
|---|---|---|---|
| Plus Jakarta Sans + Inter | heading and body | 3 | digitalocean.com, clickup.com, udacity.com |
| Manrope + Inter | heading and body | 2 | supabase.com, stackblitz.com |
| Inter + JetBrains Mono | body and code | 2 | upstash.com, remix.run |
| Inter + Geist Mono | body and code | 2 | newrelic.com, elevenlabs.io |
| Avant Garde For Salesforce + Salesforce Sans | heading and body | 2 | slack.com, salesforce.com |
How should I read this?
This is what real, well-known sites do, which makes a good starting point and not a rule. Pairings that repeat are rarer than you might expect, because most sites use one family for almost everything. Each site was opened twice in a real browser and Chrome was asked which font file drew each piece of text. We count a font for a site only if both runs saw it and it drew at least 2% of the site’s custom-font text. The full method.
Back to the 100 best website fonts.
FAQ
What makes a font pairing?
Here, two different typefaces that are the biggest font for different jobs on the same site: headings and body copy, or body copy and code.
Are these the best pairings?
They are the pairings that repeat on real sites. That shows what works in production, but it is not an editorial ranking.
Why are so few pairings listed?
Most sites use a single family for headings and body text, so a repeated pairing of two different families is uncommon.
How were the sites chosen?
We chose well-known sites across 17 industries for recognizability. It is a deliberate sample, not a random one.
How do you know which font a site uses?
We ask Chrome which font file it used to draw each piece of text, twice per site, and count a font only if both runs saw it.