Typeset & Typography
An editorial typographic scale combining a high-contrast display serif, a clean geometric sans, and the system monospace stack for code.
Font Family Pairings
Gambetta
Used for hero titles, quotes, and primary section headers. Designed by Indian Type Foundry (ITF) and distributed through Fontshare. The site self-hosts the Regular, Medium and Semibold weights.
Poppins
Used for interactive controls, paragraph bodies, and inputs. Clean, geometric, and effortless to scan.
System Mono
Tailwind's default font-mono stack (ui-monospace, SF Mono, Menlo, Consolas). Used for code blocks, terminal snippets, API payload fields, and technical parameters. No web font is downloaded.
Typographic Hierarchy & Scale
| Role | Font Family | Size & Weight | Sample Preview |
|---|---|---|---|
Display Large | Gambetta Serif | 24px - 48px (400) | DevClub Architecture |
Section Heading | Poppins Sans | 16px - 18px (600) | Design Tokens & Physics |
Body Standard | Poppins Sans | 12px - 15px (300 / 400) | Components engineered for high visual fidelity and frame rate. |
Code & Metadata | System Monospace | 11px - 14px (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, then apply both variables to the <html> element and map them in @theme inline as --font-sans and --font-serif:
Gambetta is copyright Indian Type Foundry. If you self-host it in your own project, download it from Fontshare and follow the licence that ships with the font files.