Install FontSwap
Bebas Neue
About Bebas Neue
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- 400
- Features
- Standard
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →Bebas Neue is a condensed all-caps display typeface designed by Ryoichi Tsunekawa. Originally released in 2010 and later expanded with additional weights for Google Fonts, Bebas Neue has become one of the most popular free display fonts, offering clean geometric forms perfect for headlines, titles, and branding.
History and Design
Ryoichi Tsunekawa (Dharma Type) designed Bebas Neue as an extension of his original Bebas font, refining the letterforms and expanding the family. The design follows condensed sans-serif principles—tall, narrow letterforms that pack maximum content into minimal horizontal space.
Bebas Neue's success lies in its balance of personality and utility. The condensed proportions command attention, while the clean geometric construction maintains legibility and versatility across applications.
Technical Features
- All-caps design: Optimized for uppercase typography
- Condensed proportions: Space-efficient letterforms
- Clean geometry: Modern, precise construction
- Web optimized: Fast loading and crisp rendering
- Extended Latin: Comprehensive character support
Why Bebas Neue Excels
Bebas Neue succeeds by offering professional-grade display typography at no cost. Its clean execution and versatile character make it suitable for diverse applications—from film posters to website headers to product packaging. The condensed form provides impact without aggression.
Best Use Cases
Bebas Neue excels in:
- Film and video: Title cards and credits
- Headlines: Bold, condensed statement pieces
- Branding: Modern, clean logo type
- Web headers: High-impact section titles
Usage Tips
Bebas Neue works best for short text—headlines, titles, labels, and navigation. Avoid extended reading due to the all-caps format. Consider generous letter-spacing at very large sizes for optical refinement. Pair with readable body fonts like Open Sans, Roboto, or Lato. The single weight means creating hierarchy through size rather than weight variation. Bebas Neue Pro (available separately) offers additional weights for more typographic flexibility.
Is Bebas Neue on Google Fonts?
Yes, Bebas Neue is available for free on Google Fonts. Get Bebas Neue on Google Fonts ↗
Alternative For (15)
Bebas Neue is a free alternative to the following premium fonts:
Condensed all-caps display font with clean geometric forms
Free condensed all-caps display font with similar industrial geometric character
Condensed display font with all-caps design and strong visual presence
Compare Bebas Neue
See how Bebas Neue compares to other fonts side by side.
Font Pairings
Fonts that pair well with Bebas Neue based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Bebas Neue in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Bebas Neue.
@font-face {
font-family: 'Bebas Neue Fallback';
src: local('Arial');
ascent-override: 90%;
descent-override: 30%;
line-gap-override: 0%;
size-adjust: 134.99%;
}How to Use Bebas Neue
Copy these code snippets to quickly add Bebas Neue to your project.
CSS code for Bebas Neue
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&display=swap');HTML code for Bebas Neue
<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&display=swap" rel="stylesheet">Tailwind code for Bebas Neue
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'bebas-neue': ['"Bebas Neue"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-bebas-neue">Your text here</p>Next.js code for Bebas Neue
// Using next/font (Next.js 13+)
import { Bebas_Neue } from 'next/font/google';
const bebas_neue = Bebas_Neue({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={bebas_neue.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Bebas Neue"' }}>Your text</p>Expo and React Native code for Bebas Neue
// Install: npx expo install @expo-google-fonts/bebas-neue expo-font
import { useFonts, Bebas_Neue_400Regular } from '@expo-google-fonts/bebas-neue';
export default function App() {
const [fontsLoaded] = useFonts({
Bebas_Neue_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Bebas_Neue_400Regular' }}>
Your text here
</Text>
);
}