Fraunces + Inter

Fraunces and Inter combine an expressive, warm variable serif heading with a highly legible, modern sans-serif body.

Tactile WarmthOrganic CraftModern Storytellingserif + 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 Fraunces and Inter Work Together

Eccentric organic old-style serif paired with ultra-clean neo-grotesque sans.

Heading Role: Fraunces

Warm charismatic titles, organic slogans, and editorial leads. Designed by Phaedra Charles, Flavia Zimbardi, this old-style display serif establishes immediate authority in title hierarchies.

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

Body Role: Inter

Clear interface text, descriptions, and continuous body copy. Crafted by Rasmus Andersson, this neo-grotesque sans-serif supports comfortable, clear reading across variable viewport sizes.

Suggested Weight: 400 (Regular)

When This Pairing Works Best

Artisanal brands, independent coffee roasters, culinary blogs, modern creative agencies, and indie software tools.

When You Might Choose Another Pairing

When strict institutional neutrality or cold corporate styling is required.

Why This Pairing Works

Fraunces delivers old-style warmth, tactile soft terminals, and eccentric organic charm in display headlines. Inter provides clean, neutral screen legibility for body text and interactive UI elements, creating an effective balance between personality and utility.

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=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..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: "Fraunces", serif;
  --font-body: "Inter", sans-serif;
}

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

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