Heading: Playfair Display
Body: Source Sans 3
Good typography is invisible until it is missing
A strong pairing gives headings a distinct voice while body text stays calm and readable. Contrast in structure, weight or classification helps readers understand the hierarchy at a glance, while shared proportions keep the page feeling coherent.
Why this pairing works
Playfair Display's high stroke contrast gives headlines drama, while Source Sans 3's even, humanist texture keeps paragraphs calm. The contrast in classification makes the hierarchy obvious at a glance.
Copy the pairing
All curated pairings
Each combination was chosen for a specific reason, explained on its card. Select one to load it into the generator.
- Heading Playfair Display Body Source Sans 3 Good type is invisible until it is missing Playfair Display's high stroke contrast gives headlines drama, while Source Sans 3's even, humanist texture keeps paragraphs calm. The contrast in classification makes the hierarchy obvious at a glance. Use Playfair Display with Source Sans 3
- Heading Fraunces Body Inter Notes on rhythm, colour and space Fraunces adds warmth and personality to headings; Inter is deliberately neutral and built for screens. One voice speaks, the other stays out of the way. Use Fraunces with Inter
- Heading DM Serif Display Body DM Sans The shape of a confident brand Both come from the DM type system, so proportions and spirit are related. The high-contrast display serif and the low-contrast geometric sans differ enough to separate headings from text. Use DM Serif Display with DM Sans
- Heading Source Serif 4 Body Source Sans 3 Designing for the long read Source Serif was designed to accompany Source Sans, so x-heights and rhythm are coordinated. A low-risk serif and sans combination for content-heavy sites. Use Source Serif 4 with Source Sans 3
- Heading IBM Plex Serif Body IBM Plex Sans Every letter has a job to do Members of the same IBM Plex superfamily share proportions and engineered details, which makes them combine cleanly with a technical, precise tone. Use IBM Plex Serif with IBM Plex Sans
- Heading Montserrat Body Lora A quieter way to read the news Montserrat's wide geometric capitals create strong headings, and Lora's moderate-contrast, calligraphic serif is comfortable for paragraphs. Geometric and calligraphic structures contrast without clashing. Use Montserrat with Lora
- Heading Libre Baskerville Body Libre Franklin Good type is invisible until it is missing Baskerville and Franklin Gothic are a long-standing pairing in American print. Both open versions are web-optimised, giving a classic, trustworthy newspaper feel. Use Libre Baskerville with Libre Franklin
- Heading Cormorant Garamond Body Lato Notes on rhythm, colour and space Cormorant Garamond's fine details look elegant at large sizes, and Lato's semi-rounded sans holds up at small sizes where Cormorant would struggle. Use Cormorant Garamond with Lato
- Heading Oswald Body Lato The shape of a confident brand Oswald's condensed gothic fits long headlines into tight spaces; Lato's open, warm forms balance it in body text. Use Oswald with Lato
- Heading Space Grotesk Body Inter Designing for the long read Space Grotesk's quirky details give headings a distinctive tech voice. Inter is neutral and very legible, so paragraphs stay easy to read. Use Space Grotesk with Inter
- Heading Instrument Serif Body Instrument Sans Every letter has a job to do Released together by the same designers, the condensed display serif and the precise sans share a contemporary, editorial sensibility. Use Instrument Serif with Instrument Sans
- Heading Newsreader Body Schibsted Grotesk A quieter way to read the news Both faces were made with digital news in mind. Newsreader's optical sizes suit headlines, and Schibsted Grotesk is clear for supporting text and navigation. Use Newsreader with Schibsted Grotesk
- Heading Figtree Body Literata Good type is invisible until it is missing A friendly sans for headings paired with a serif designed for reading long texts on screens. The serif body slows the eye for reading; the sans keeps headings light. Use Figtree with Literata
- Heading Roboto Slab Body Roboto Notes on rhythm, colour and space Roboto Slab is Roboto's slab companion, so the two share a skeleton. The serifs add emphasis to headings while body text stays familiar. Use Roboto Slab with Roboto
- Heading Zilla Slab Body Fira Sans The shape of a confident brand Both have served as Mozilla brand typefaces. The contemporary slab gives headings a confident voice; Fira Sans is highly legible for body text. Use Zilla Slab with Fira Sans
- Heading Abril Fatface Body Poppins Designing for the long read Abril Fatface's heavy Didone forms make bold statements; Poppins' clean geometry is simple enough not to compete. Keep body text short with this pair. Use Abril Fatface with Poppins
- Heading Bebas Neue Body Montserrat Every letter has a job to do Bebas Neue's tall all-caps letters create compact, poster-like headings, and Montserrat's wide geometric forms provide contrast in width for the text. Use Bebas Neue with Montserrat
- Heading Syne Body Manrope A quieter way to read the news Syne's expressive extremes make striking headings for creative studios; Manrope's restrained modern forms keep the content readable. Use Syne with Manrope
- Heading Karla Body Spectral Good type is invisible until it is missing A crisp grotesque for headings above an elegant serif made for screen reading. Reversing the usual serif-heading convention gives a modern, literary feel. Use Karla with Spectral
- Heading Poppins Body Lora Notes on rhythm, colour and space Poppins gives headings a clean, contemporary look and Lora keeps long text warm and readable, a popular combination for small business and lifestyle sites. Use Poppins with Lora
- Heading Lexend Body Atkinson Hyperlegible The shape of a confident brand Both families were created with readability goals in mind. Lexend gives headings a friendly geometric voice, and Atkinson Hyperlegible's distinct letterforms help body text for low-vision readers. Use Lexend with Atkinson Hyperlegible
- Heading Archivo Black Body Archivo Designing for the long read Archivo Black is the heavy display member of the Archivo family, so it shares the body face's grotesque structure while adding maximum weight contrast. Use Archivo Black with Archivo
- Heading Unbounded Body Figtree Every letter has a job to do Unbounded's wide, rounded headings have a bold, futuristic presence; Figtree's friendly, compact geometry keeps text easy to read beneath them. Use Unbounded with Figtree
- Heading Space Mono Body Space Grotesk A quieter way to read the news Space Grotesk was derived from Space Mono, so the two share details. The monospace adds a technical flavour to headings while the proportional version reads more smoothly. Use Space Mono with Space Grotesk
How the pairings were chosen
Every curated pairing combines two families from the catalogue and comes with a short explanation. Most rely on one of three proven approaches: contrast in classification (a serif with a sans-serif), shared origin (members of the same superfamily, such as Source Serif and Source Sans), or contrast in personality (an expressive display face over a quiet text face).
You can switch either font at any time. When the combination no longer matches a curated pairing, the explanation is replaced by a reminder to judge it by eye, because we do not generate reasons for combinations we have not reviewed.
Checking a pairing before you commit
- Replace the sample heading and paragraph with your own content.
- Make sure the heading and body fonts differ clearly. If you have to look twice to see which is which, choose a stronger contrast.
- Read the paragraph at its real size. Body text matters more than headings because visitors spend most of their time reading it.
- Open the pairing in the Website Typography Preview to test it with navigation, buttons and cards.
For the reasoning behind good combinations, read best practices for heading and body font combinations.