Typeset & Typography
An editorial typographic scale combining high-craft Italian serifs, clean geometric grotesques, and technical monospace labels.
Font Family Pairings
Display Serif
Gambetta
Used for hero titles, quotes, and primary section headers. Conveys craft, timelessness, and prestige.
Interface Sans
Poppins
Used for interactive controls, paragraph bodies, and inputs. Clean, geometric, and effortless to scan.
Technical Mono
JetBrains Mono
Used strictly for code blocks, terminal snippets, API payload fields, and technical parameters.
Typographic Hierarchy & Scale
| Role | Font Family | Size & Weight | Sample Preview |
|---|---|---|---|
Display Large | Gambetta Serif | 48px - 64px (300 / 400) | DevClub Architecture |
Section Heading | Poppins Sans | 20px - 28px (600) | Design Tokens & Physics |
Body Standard | Poppins Sans | 14px - 16px (300 / 400) | Components engineered for high visual fidelity and frame rate. |
Code & Metadata | Monospace | 11px - 13px (400) | GET /api/components/[slug] |
Font Setup in Next.js
Configure fonts via Next.js Google Fonts and local font loader in src/app/layout.tsx:
src/app/layout.tsx
1
import { Poppins } from "next/font/google";
2
import localFont from "next/font/local";
3
4
const poppins = Poppins({
5
variable: "--font-poppins",
6
subsets: ["latin"],
7
weight: ["300", "400", "500", "600", "700"],
8
display: "swap",
9
});
10
11
const gambetta = localFont({
12
src: "../../public/fonts/Gambetta-Regular.otf",
13
variable: "--font-gambetta",
14
display: "swap",
15
});