Roboto Workhorse
One family, committed weight contrast, mono for the technical voice. The quiet setup for tools and dashboards that should disappear behind their data.
Quick brown foxes jump the fence at 60fps
The body face carries the reading line: long paragraphs, labels, interface copy. It stays out of the display face's way and keeps its own rhythm at small sizes.
const pair = { display, body, mono }; // 0O 1lI
Roboto · Roboto · JetBrains Mono
// Roboto Workhorse - Roboto carries display AND body on weight contrast; JetBrains Mono for code.
import { JetBrains_Mono, Roboto } from "next/font/google";
export const roboto = Roboto({ subsets: ["latin"], weight: ["400", "500", "700"], variable: "--font-roboto" });
export const mono = JetBrains_Mono({ subsets: ["latin"], weight: ["400", "500"], variable: "--font-mono" });
// display = Roboto 700, body = Roboto 400/500 - the pair lives in the weights, not two families.