Google font pairings

Font pairings by base font

• Montserrat font pairings

  Montserrat

  Paired with Source Sans 3: this paragraph is set in Source Sans 3 so you can judge the two together.

  Pairs with Source Sans 3, Fira Sans, Karla, Hind, Inconsolata

  See all 5 pairings

• Lato font pairings

  Lato

  Paired with Abril Fatface: this paragraph is set in Abril Fatface so you can judge the two together.

  Pairs with Abril Fatface, Karla, Merriweather, Francois One

  See all 4 pairings

• Raleway font pairings

  Raleway

  Paired with Merriweather: this paragraph is set in Merriweather so you can judge the two together.

  Pairs with Merriweather, Bitter, Cabin, Hind, Inconsolata

  See all 5 pairings

• Open Sans font pairings

  Open Sans

  Paired with Montserrat: this paragraph is set in Montserrat so you can judge the two together.

  Pairs with Montserrat, Bitter, Source Sans 3, Domine, Alegreya

  See all 5 pairings

• Roboto font pairings

  Roboto

  Paired with Archivo Black: this paragraph is set in Archivo Black so you can judge the two together.

  Pairs with Archivo Black, Lora, Rokkitt, Nunito, Raleway

  See all 5 pairings

• Source Sans 3 font pairings

  Source Sans 3

  Paired with Merriweather: this paragraph is set in Merriweather so you can judge the two together.

  Pairs with Merriweather, Bitter, Cabin, Roboto, Open Sans

  See all 5 pairings

• Nunito font pairings

  Nunito

  Paired with Alegreya: this paragraph is set in Alegreya so you can judge the two together.

  Pairs with Alegreya, Lora, Open Sans, Roboto

  See all 4 pairings

• Ubuntu font pairings

  Ubuntu

  Paired with Rokkitt: this paragraph is set in Rokkitt so you can judge the two together.

  Pairs with Rokkitt, Lora, Kreon, Cabin, Source Sans 3

  See all 5 pairings

• Lora font pairings

  Lora

  Paired with Merriweather: this paragraph is set in Merriweather so you can judge the two together.

  Pairs with Merriweather, Source Sans 3, Roboto, Ubuntu, Open Sans

  See all 5 pairings

• Josefin Sans font pairings

  Josefin Sans

  Paired with Cardo: this paragraph is set in Cardo so you can judge the two together.

  Pairs with Cardo, Abril Fatface, Yeseva One, Lato, Playfair Display

  See all 5 pairings

Heading and body pairs

Eighteen more pairs, each with a heading font and a body font. Every card is a live sample, so you can judge the pair at reading size, then copy the CSS.

• Karla and Inconsolata

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Karla · Body Inconsolata

  Karla is a compact sans with a little personality, and Inconsolata's monospace letters give the body a typed, technical texture. It fits developer blogs and notes pages.

  Copy CSS

• Libre Baskerville and Public Sans

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Libre Baskerville · Body Public Sans

  A traditional serif headline over a plain, neutral sans body gives clear roles. Public Sans stays out of the way of Baskerville's detail.

  Copy CSS

• Playfair Display and Be Vietnam Pro

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Playfair Display · Body Be Vietnam Pro

  Playfair's sharp high-contrast headings need a body font with simple shapes. Be Vietnam Pro is clean and even, so the two do not fight.

  Copy CSS

• Plus Jakarta Sans and Inter

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Plus Jakarta Sans · Body Inter

  Both are modern sans serifs, so the pairing reads as one voice. Jakarta's rounder headings add a bit of warmth over Inter's neutral text.

  Copy CSS

• Bai Jamjuree and Work Sans

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Bai Jamjuree · Body Work Sans

  Bai Jamjuree has squared-off, slightly technical curves that give headings an edge. Work Sans is calm enough for paragraphs beneath it.

  Copy CSS

• Barlow Condensed and Barlow

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Barlow Condensed · Body Barlow

  These come from the same designer, so the proportions match. The condensed headline saves space and the regular width keeps paragraphs easy to read.

  Copy CSS

• Instrument Serif and Instrument Sans

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Instrument Serif · Body Instrument Sans

  A matched pair from the same designers. The condensed, elegant serif works for large headlines and the sans handles the text.

  Copy CSS

• Prata and Red Hat Text

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Prata · Body Red Hat Text

  Prata is a high-contrast display serif with a fashion look. Red Hat Text is sturdy and open, so small paragraphs stay legible.

  Copy CSS

• Fraunces and Epilogue

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Fraunces · Body Epilogue

  Fraunces has soft, wobbly serif forms that give headings warmth. Epilogue's straight grotesque shapes balance that with a cleaner body.

  Copy CSS

• Phudu and Onest

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Phudu · Body Onest

  Phudu is a heavy, playful display face meant for short headlines. Onest is a plain sans that keeps the text readable underneath.

  Copy CSS

• Syncopate and Roboto Serif

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Syncopate · Body Roboto Serif

  Syncopate is wide and geometric, best in capitals for short titles. Roboto Serif gives the body a readable contrast of shape.

  Copy CSS

• Oswald and Tiro Tamil

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Oswald · Body Tiro Tamil

  Oswald's tall, narrow capitals make strong headings. Tiro Tamil is a gentle serif that also covers the Tamil script, so it suits bilingual pages.

  Copy CSS

• Rubik and Open Sans

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Rubik · Body Open Sans

  Rubik's rounded corners make headings friendly, and Open Sans is a neutral text face that most readers find easy.

  Copy CSS

• Noto Serif and Inter

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Noto Serif · Body Inter

  A sturdy serif for headings and a screen-first sans for the body. Both cover many languages, which helps on multilingual sites.

  Copy CSS

• Eczar and Libre Franklin

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Eczar · Body Libre Franklin

  Eczar is heavy and wide, with strong presence at heading size. Libre Franklin is a plain grotesque that keeps the body text calm.

  Copy CSS

• Geist and Geist

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Geist · Body Geist

  A single family used at two weights. Bold Geist for headings and regular for text gives a consistent, clean interface look.

  Copy CSS

• Oswald and Playfair Display

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Oswald · Body Playfair Display

  A tall condensed sans against a high-contrast serif gives obvious separation. Use Oswald for short headings and Playfair for longer reading.

  Copy CSS

• Cormorant and Public Sans

  Headings that hold the page

  A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.

  Heading Cormorant · Body Public Sans

  Cormorant is a fine, elegant serif that needs room to breathe at large sizes. Public Sans supports it with a sturdy, neutral body.

  Copy CSS