Syne + Inter

An expressive, wide display pairing for creative agencies and art direction.

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

Syne (especially in heavier weights) is aggressively wide and characterful. Inter provides the necessary neutral canvas for the body text so the design isn’t overwhelming.

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=Syne:wght@400..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
CSS
:root {
  --font-heading: "Syne", sans-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

Syne

Heading • sans-serif

View Syne Details
Inter

Body • sans-serif

View Inter Details
Syne and Inter Font Pairing | FontDuo