Bebas Neue + Inter

A high-impact pairing for bold marketing sites and modern portfolios.

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

Bebas Neue is an all-caps display font that demands attention, while Inter steps back to provide flawless legibility for supporting text.

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

Font Details

Bebas Neue

Heading • display

View Bebas Neue Details
Inter

Body • sans-serif

View Inter Details
Bebas Neue and Inter Font Pairing | FontDuo