Bebas Neue + Inter

A high-impact headline combination pairing an ultra-condensed all-caps display title with the neutral precision of Inter.

High EnergyPoster ImpactUtilitarian Punchdisplay + 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 Bebas Neue and Inter Work Together

Extreme proportion contrast: tall condensed all-caps display paired with balanced neo-grotesque sans.

Heading Role: Bebas Neue

Massive hero titles, poster headlines, and energetic banners. Designed by Ryoichi Tsunekawa, this condensed display sans establishes immediate authority in title hierarchies.

Suggested Weight: 400 (Regular All-Caps)

Body Role: Inter

All paragraph text, UI forms, buttons, and navigation elements. Crafted by Rasmus Andersson, this neo-grotesque sans-serif supports comfortable, clear reading across variable viewport sizes.

Suggested Weight: 400 (Regular) and 500 (Medium)

When This Pairing Works Best

Action sports brands, fitness apps, entertainment portals, creative video agency portfolios, and festival websites.

When You Might Choose Another Pairing

For medical, financial, or academic projects requiring understated scholarly decorum.

Why This Pairing Works

Bebas Neue consumes minimal horizontal space while delivering high vertical energy and poster impact. Inter steps in as an effective typographic counterweight, providing clean, neutral, and readable paragraph text that keeps the interface functional.

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=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

CSS Rules

:root {
  --font-heading: "Bebas Neue", sans-serif;
  --font-body: "Inter", sans-serif;
}

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

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