RANK #03 86% MATCH

Montserrat × Bitter

sans-serif  +  serif

Bitter is a slab serif designed for screens, with a tall x-height that lines up neatly with Montserrat's. The slab serifs give body text more visual weight than a delicate book serif would, which balances Montserrat's st...

Headings + Body Google Fonts Free
Match scores

How Montserrat and Bitter score across four checks — class contrast, role clarity, x-height harmony and mood affinity. Higher is better.

COMPOSITE MATCH
86 /100
Strong match
Class contrast 86
Role clarity 88
X-height harmony 88
Mood affinity 82
WHY IT WORKS
Structure meets readability

Bitter is a slab serif designed for screens, with a tall x-height that lines up neatly with Montserrat's. The slab serifs give body text more visual weight than a delicate book serif would, which balances Montserrat's strong geometric headlines instead of being overpowered by them. It's a sturdier, more contemporary feel than the Merriweather route.

Where it shines

Tech and product blogs, documentation, dashboards and UI where body text needs to hold its own against bold headings.

Where to be careful

Slabs can feel dense in long paragraphs; give Bitter generous line-height (1.6+) so the body breathes under the headings.

THE TYPEFACES
Meet the pair
Ag HEADING
sans-serif · Julieta Ulanovsky · 2011
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ?!
WEIGHTS
Thin ExtraLight Light Regular Medium SemiBold
BEST FOR Headlines, labels, UI
Ag BODY
serif · Sol Matas (Huerta Tipografica) · 2011
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ?!
WEIGHTS
Thin ExtraLight Light Regular Medium SemiBold
BEST FOR Body text, quotes, long reads
GET THE PAIR
Drop it into your project

Add the fonts, then two rules — Montserrat for headings, Bitter for everything you read.

index.html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Bitter:wght@400;500&display=swap" rel="stylesheet">
styles.css
h1, h2, h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body, p {
  font-family: "Bitter", serif;
  font-weight: 400;
  line-height: 1.7;
}
THE FONTPAIR JOURNAL

Get the pairing notes, weekly.

One short email a week — a new pairing, a specimen, and a tip. No spam.