Bebas Neue + Inter
MAXIMUM IMPACT
Headlines that demand attention
Bebas Neue doesn't whisper, it declares. When your message can't wait, these all-caps letterforms cut through the noise. Inter keeps everything else readable.
Maximum impact headlines. Bebas Neue's all-caps power creates instant visual punch, grounded by Inter's clean functionality.
Typefaces Used
Bebas Neue
All-caps display typeface. Iconic for posters, headlines, and bold statements.
Designed by Ryoichi Tsunekawa
Released 2010
Available weights: 400
Inter
The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.
Designed by Rasmus Andersson
Released 2016
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Bebas Neue · 400 · 72px · 0.95
Headline Two
Bebas Neue · 400 · 48px · 1
Headline Three
Inter · 600 · 22px · 1.25
Body text for paragraphs and long-form content.
Inter · 400 · 16px · 1.7
Caption and metadata text
Inter · 400 · 14px · 1.5
In Context
MAXIMUM IMPACT
Headlines that demand attention
Bebas Neue doesn't whisper, it declares. When your message can't wait, these all-caps letterforms cut through the noise. Inter keeps everything else readable.
“Speak softly but carry a big stick.”
Theodore Roosevelt (inverted)
Developer Exports
<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:wght@400&family=Inter:wght@400;600&display=swap" rel="stylesheet">h1 {
font-family: "Bebas Neue", sans-serif;
font-size: 72px;
font-weight: 400;
line-height: 0.95;
letter-spacing: 0.02em;
}
h2 {
font-family: "Bebas Neue", sans-serif;
font-size: 48px;
font-weight: 400;
line-height: 1;
}
h3 {
font-family: "Inter", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
bebasneue: [""Bebas Neue"", "sans-serif"],
inter: [""Inter"", "sans-serif"],
},
fontSize: {
"h1": ["72px", { lineHeight: "0.95", fontWeight: "400" }],
"h2": ["48px", { lineHeight: "1", fontWeight: "400" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "600" }],
"body": ["16px", { lineHeight: "1.7", fontWeight: "400" }],
"caption": ["14px", { lineHeight: "1.5", fontWeight: "400" }],
},
},
},
};
export default config;AI-Ready Exports
Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.
System Description
Explain this type system to an AI
Use this typographic system: Headings: Bebas Neue, 400 weight Used for H1–H3 All-caps display typeface. Iconic for posters, headlines, and bold statements. Body: Inter, 400 weight Used for paragraphs and UI The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes. Tone: bold, impactful, modern Maximum impact headlines. Bebas Neue's all-caps power creates instant visual punch, grounded by Inter's clean functionality. Use this scale: H1 — 72px / 0.95 / 0.02em H2 — 48px / 1 H3 — 22px / 1.25 Body — 16px / 1.7 Caption — 14px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Bebas Neue — 400 — 72px — line-height 0.95 — letter-spacing 0.02em H2 — Bebas Neue — 400 — 48px — line-height 1 H3 — Inter — 600 — 22px — line-height 1.25 Body — Inter — 400 — 16px — line-height 1.7 Caption — Inter — 400 — 14px — line-height 1.5 Headings should feel bold and impactful. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.