Font Pairing

Find the perfect heading + body combination

The Quick Brown Fox

Jumps over the lazy dog. This is body text using Source Sans Pro. The heading above uses Playfair Display. Together they create a elegant feel that works well for web design.

Heading: 48px — Playfair Display

Body: 16px — Source Sans Pro

CSS

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+Pro:wght@400;700&display=swap');

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
}

body, p {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
}