RANK #08 84% MATCH

Cormorant × Karla

serif  +  sans-serif

Cormorant's high-contrast display serif over Karla's grotesque body pairs classical elegance with a contemporary, slightly quirky reading face — the delicate serif leads with luxury while Karla keeps the body modern and...

Headings + Body Google Fonts Free
Open in Studio Copy CSS
Match scores

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

COMPOSITE MATCH
84 /100
Reliable choice
Class contrast 92
Role clarity 84
X-height harmony 76
Mood affinity 78
WHY IT WORKS
Structure meets readability

Cormorant's high-contrast display serif over Karla's grotesque body pairs classical elegance with a contemporary, slightly quirky reading face — the delicate serif leads with luxury while Karla keeps the body modern and clean.

Where it shines

Design-led editorial, boutique and brand sites wanting an elegant headline over a contemporary body with character.

Where to be careful

Keep Karla to body and small UI, and set Cormorant large so its hairlines lead clearly.

THE TYPEFACES
Meet the pair
Ag HEADING
Cormorant
serif · Christian Thalmann (Catharsis Fonts) · 2015
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ?!
WEIGHTS
Light Regular Medium SemiBold Bold
BEST FOR Headlines, labels, UI
Ag BODY
Karla
sans-serif · Jonathan Pinhorn · 2012
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ?!
WEIGHTS
ExtraLight Light Regular Medium SemiBold Bold
BEST FOR Body text, quotes, long reads
GET THE PAIR
Drop it into your project

Add the fonts, then two rules — Cormorant for headings, Karla for everything you read.

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

body, p {
  font-family: "Karla", serif;
  font-weight: 400;
  line-height: 1.7;
}
MORE PAIRINGS
Other ways to use Cormorant
All Cormorant pairings
Ag × Ag
Cormorant + Cormorant

Cormorant is a high-contrast display serif with real elegance, and over Open Sans's neutral body it creates a refined, editorial hierarchy —...

86% match Rank #01
Ag × Ag
Cormorant + Lato

Cormorant's elegant display serif over Lato's warm humanist body pairs luxury with approachability — the high-contrast serif supplies refine...

86% match Rank #02
Ag × Ag
Cormorant + Montserrat

Cormorant's high-contrast display serif over Montserrat's geometric body pairs classical elegance with modern structure — the delicate serif...

86% match Rank #03
THE FONTPAIR JOURNAL

Get the pairing notes, weekly.

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