Geist Sans + Geist Mono
Next Generation
The Vercel design language
Geist represents the future of interface typography. Clean, neutral, and optimized for the modern web. Paired with monospace accents, it's the foundation for building what's next.
Vercel's design system choice. Geist's clean neutrality with Roboto Mono for technical accents creates a polished developer experience.
Typefaces Used
Geist Sans
Vercel's typeface. Designed for legibility and modern interfaces.
Designed by Vercel
Released 2023
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Geist Sans · 700 · 42px · 1.1
Headline Two
Geist Sans · 600 · 28px · 1.2
Headline Three
Geist Sans · 500 · 20px · 1.3
Body text for paragraphs and long-form content.
Geist Sans · 400 · 16px · 1.65
Caption and metadata text
Roboto Mono · 400 · 13px · 1.5
In Context
Next Generation
The Vercel design language
Geist represents the future of interface typography. Clean, neutral, and optimized for the modern web. Paired with monospace accents, it's the foundation for building what's next.
“Make it work, make it right, make it fast.”
Kent Beck
Developer Exports
<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=Geist:wght@400;500;600;700&family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Geist Sans", sans-serif;
font-size: 42px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-family: "Geist Sans", sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 1.2;
}
h3 {
font-family: "Geist Sans", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.3;
}
.body-text {
font-family: "Geist Sans", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.65;
}
.caption {
font-family: "Roboto Mono", monospace;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
geistsans: [""Geist Sans"", "sans-serif"],
robotomono: [""Roboto Mono"", "monospace"],
},
fontSize: {
"h1": ["42px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["28px", { lineHeight: "1.2", fontWeight: "600" }],
"h3": ["20px", { lineHeight: "1.3", fontWeight: "500" }],
"body": ["16px", { lineHeight: "1.65", fontWeight: "400" }],
"caption": ["13px", { lineHeight: "1.5", fontWeight: "400" }],
},
},
},
};
export default config;AI-Ready Exports
Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.
System Description
Explain this type system to an AI
Use this typographic system: Headings: Geist Sans, 700 weight Used for H1–H3 Vercel's typeface. Designed for legibility and modern interfaces. Body: Geist Sans, 400 weight Used for paragraphs and UI Vercel's typeface. Designed for legibility and modern interfaces. Tone: minimal, tech, modern Vercel's design system choice. Geist's clean neutrality with Roboto Mono for technical accents creates a polished developer experience. Use this scale: H1 — 42px / 1.1 / -0.02em H2 — 28px / 1.2 H3 — 20px / 1.3 Body — 16px / 1.65 Caption — 13px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Geist Sans — 700 — 42px — line-height 1.1 — letter-spacing -0.02em H2 — Geist Sans — 600 — 28px — line-height 1.2 H3 — Geist Sans — 500 — 20px — line-height 1.3 Body — Geist Sans — 400 — 16px — line-height 1.65 Caption — Roboto Mono — 400 — 13px — line-height 1.5 Headings should feel minimal and tech. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.