Playfair Display and Source Sans 3 Font Pairing
Set in Playfair Display 700 and Source Sans 3 400
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;700&display=swap');
body {
font-family: 'Source Sans 3', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
}Playfair Display at 700 for headings and Source Sans 3 for body text make a high-contrast, elegant pair that still reads easily on a phone. The sharp serif headings bring a sense of occasion, while the clean sans serif keeps paragraphs relaxed and open. It suits lifestyle and recipe blogs, wedding websites and invitations, and portfolios that want editorial polish without feeling stiff.
Playfair Display & Source Sans 3
Headings 700, body text 400
ABCDEFGHIJKLM
abcdefghijklm
0123456789 &?!
Body text has to stay comfortable from the first line to the last.
Why Playfair Display and Source Sans 3 Work Together
Playfair Display is a transitional serif with very high stroke contrast: thick vertical stems sit next to hairline curves and fine serifs, showing the influence of John Baskerville and Scotch Roman types. That contrast makes a Playfair headline look dressed up. It is also why it needs a calm partner, because two expressive faces would compete on the same page.
Source Sans 3, designed by Paul D. Hunt as a sans serif intended to work well in user interfaces, is that calm partner. Its strokes are nearly even in thickness, its letters are open, and its spacing is comfortable, so paragraphs feel light next to the dark, tightly drawn headings. You get one clear contrast, serif against sans serif and high contrast against low, which makes the hierarchy obvious at a glance.
Where Playfair Display and Source Sans 3 Work Best
The pairing shines wherever presentation matters as much as information. A food or travel blog can use Playfair for recipe titles and Source Sans 3 for ingredient lists and method steps. A couple’s wedding site gets a formal feel for names and dates while the schedule stays easy to scan, and the same fonts carry over to a printed save-the-date card. Photographers and illustrators can set project titles in Playfair and keep captions in Source Sans 3.
Weights and Sizes to Use
Set headings at 700. Playfair Display runs from 400 to 900, and 700 gives the hairlines enough weight to hold up on lower-resolution screens without turning heavy. Keep it above roughly 28px so the thin strokes do not break up, with a line height of 1.1 to 1.2. Use Source Sans 3 at 400 for body text and 700 for bold, at 17 or 18px with a line height of 1.6. Its range runs from 200 to 900, so 600 works well for small labels and buttons.
Things to Watch
Playfair Display is drawn for large sizes, so keep it out of body copy, small captions and navigation menus, where the hairlines get lost. Its italic is lively and decorative; save it for a word or two rather than whole paragraphs. On dark backgrounds the fine strokes can fade, so test a light-on-dark heading at full size before committing.
Similar Pairings
Pairs with a similar elegant feel, each with its own page.
Cormorant Garamond & Lato
A well-made pair feels like one voice in two registers: a confident headline and a calm, even paragraph underneath.
Playfair Display & Lora
Readers spend most of their time in body text, so it has to stay comfortable from the first paragraph to the tenth.
Bodoni Moda & Jost
Headlines get a second of attention. The body font has to hold it for minutes, which is why it deserves the most care.