EB Garamond + Inter
Centuries of Wisdom
Where history meets hypertext
Garamond's legacy spans five centuries of printed culture. EB Garamond brings that heritage to screens with authentic charm, while Inter ensures the interface never gets in the way of the content.
Renaissance beauty meets Swiss precision. EB Garamond's authentic old-style character paired with Inter's digital clarity creates timeless sophistication.
Typefaces Used
EB Garamond
Revival of Claude Garamond's original designs. Timeless elegance for serious typography.
Designed by Georg Duffner
Released 2010
Available weights: 400, 500, 600, 700, 800
Inter
The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.
Designed by Rasmus Andersson
Released 2016
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
EB Garamond · 600 · 52px · 1.1
Headline Two
EB Garamond · 500 · 36px · 1.2
Headline Three
EB Garamond · 500 · 26px · 1.25
Body text for paragraphs and long-form content.
Inter · 400 · 16px · 1.7
Caption and metadata text
Inter · 400 · 14px · 1.5
In Context
Centuries of Wisdom
Where history meets hypertext
Garamond's legacy spans five centuries of printed culture. EB Garamond brings that heritage to screens with authentic charm, while Inter ensures the interface never gets in the way of the content.
“The palest ink is better than the best memory.”
Chinese Proverb
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=EB+Garamond:wght@500;600&family=Inter:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "EB Garamond", serif;
font-size: 52px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
}
h2 {
font-family: "EB Garamond", serif;
font-size: 36px;
font-weight: 500;
line-height: 1.2;
}
h3 {
font-family: "EB Garamond", serif;
font-size: 26px;
font-weight: 500;
line-height: 1.25;
}
.body-text {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
ebgaramond: [""EB Garamond"", "serif"],
inter: [""Inter"", "sans-serif"],
},
fontSize: {
"h1": ["52px", { lineHeight: "1.1", fontWeight: "600" }],
"h2": ["36px", { lineHeight: "1.2", fontWeight: "500" }],
"h3": ["26px", { lineHeight: "1.25", fontWeight: "500" }],
"body": ["16px", { lineHeight: "1.7", fontWeight: "400" }],
"caption": ["14px", { 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: EB Garamond, 600 weight Used for H1–H3 Revival of Claude Garamond's original designs. Timeless elegance for serious typography. Body: Inter, 400 weight Used for paragraphs and UI The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes. Tone: classic, elegant, literary Renaissance beauty meets Swiss precision. EB Garamond's authentic old-style character paired with Inter's digital clarity creates timeless sophistication. Use this scale: H1 — 52px / 1.1 / -0.01em H2 — 36px / 1.2 H3 — 26px / 1.25 Body — 16px / 1.7 Caption — 14px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — EB Garamond — 600 — 52px — line-height 1.1 — letter-spacing -0.01em H2 — EB Garamond — 500 — 36px — line-height 1.2 H3 — EB Garamond — 500 — 26px — line-height 1.25 Body — Inter — 400 — 16px — line-height 1.7 Caption — Inter — 400 — 14px — line-height 1.5 Headings should feel classic and elegant. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.