Bebas Neue + Roboto
Grumpy wizards make toxic brew
A standfirst set in Roboto, one size up — where a pairing starts earning trust.
The five boxing wizards jump quickly over the lazy dog, mixing jugs of quiet vodka while the jury watches. Click anywhere in this preview and type your own text to try the pairing.
“Type is a beautiful group of letters, not a group of beautiful letters.”
— Matthew Carter
Fig. 1 — Bebas Neue over Roboto, in the wild.
Bebas Neue 400 / Roboto 400 — click any section and type your own copy.
Why it works
Both faces have a mechanical, slightly compressed logic — Bebas Neue in its tall condensed caps, Roboto in its rational grotesque skeleton — so the pairing reads as one industrial voice at two volumes. Roboto's tall x-height and neutral rhythm handle dense UI copy and specs without competing for attention. It is a natural fit for product sites that want impact up top and engineering credibility below.
More about each face: Bebas Neue · Roboto
Use this pairing
<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=Roboto:wght@400;700&display=swap" rel="stylesheet">h1, h2, h3 {
font-family: 'Bebas Neue', 'Arial Narrow', 'Helvetica Neue', sans-serif;
font-weight: 400;
}
body {
font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 400;
}import { Bebas_Neue, Roboto } from "next/font/google";
const heading = Bebas_Neue({
subsets: ["latin"],
weight: "400",
variable: "--font-heading",
});
const body = Roboto({
subsets: ["latin"],
weight: "400",
variable: "--font-body",
});