Bebas Neue
About Bebas Neue
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- 400
- Features
- Standard
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.
Alternative For (2)
Bebas Neue is a free alternative to the following premium fonts:
Free condensed all-caps display font with similar industrial geometric character
Condensed display font with all-caps design and strong visual presence
How to Use Bebas Neue
Copy these code snippets to quickly add Bebas Neue to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&display=swap');HTML Link Tags
<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 CSS
// 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>React / Next.js
// 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>