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.

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 editing this text.

Meaningful Digital Experiences

We believe that typography is the foundation of digital design. 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."

Why this pairing works

Playfair Display creates visual personality and contrast in headlines, while Inter provides neutral, highly readable body text. The difference between the expressive serif heading and clean sans-serif body establishes a strong visual hierarchy.

Implementation

HTML
<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
: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);
}

Font Details

Playfair Display

Heading • serif

View Playfair Display Details
Inter

Body • sans-serif

View Inter Details
Playfair Display and Inter Font Pairing | FontDuo