Playfair Display + Inter

Playfair Display and Inter create an elegant serif and modern sans-serif font combination. Preview the pairing with your own text and copy the Google Fonts code for your project.

Refined EditorialContemporary LuxuryAuthoritative Contrastserif + sans-serif

Design your next idea beautifully.

A well-designed product begins with typography that creates hierarchy, clarity, and personality. Explore this combination in real-time by clicking and editing this text directly.

Meaningful Digital Experiences

Typography is the craft of endowing human language with a durable visual form. It guides the reader’s eye and establishes the brand’s tone of voice immediately.

“Good typography helps people understand your message before they consciously notice the typeface.”

Typography Breakdown: Why Playfair Display and Inter Work Together

Extreme contrast: high-contrast transitional serif paired with low-contrast neo-grotesque sans-serif.

Heading Role: Playfair Display

Editorial and hero titles commanding primary attention. Designed by Claus Eggers Sørensen, this transitional display serif establishes immediate authority in title hierarchies.

Suggested Weight: 600 (SemiBold) or 700 (Bold)

Body Role: Inter

Paragraphs, UI navigation, and long-form readable interface text. Crafted by Rasmus Andersson, this neo-grotesque sans-serif supports comfortable, clear reading across variable viewport sizes.

Suggested Weight: 400 (Regular) for text; 500 (Medium) for UI labels

When This Pairing Works Best

Best suited for modern digital magazines, boutique design agencies, architecture portfolios, and premium lifestyle brands requiring high typographic personality without sacrificing UI legibility.

When You Might Choose Another Pairing

When designing dense data dashboards or technical developer tools where an expressive serif title feels overly theatrical or out of place.

Why This Pairing Works

Playfair Display creates visual personality and contrast in headlines with its high stroke contrast and European transitional style, while Inter provides neutral, highly readable body text. The difference between the expressive serif heading and clean sans-serif body establishes an instant, unmistakable visual hierarchy.

Implementation Code

HTML Link

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

CSS Rules

:root {
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

body {
  font-family: var(--font-body);
}