Outfit + EB Garamond
Past Meets Pixel
Five centuries compressed into one pairing
Outfit was born for screens; EB Garamond carries 500 years of typographic wisdom. Together, they prove that innovation and tradition aren't opposites. They're dance partners.
Ultra-modern geometry meets Renaissance elegance. Outfit's clean precision paired with EB Garamond's timeless sophistication.
Typefaces Used
Outfit
Geometric sans designed for the future. Clean, versatile, and screen-optimized.
Designed by Rodrigo Fuenzalida
Released 2021
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
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
Recommended Scale
Headline One
Outfit · 700 · 54px · 1
Headline Two
Outfit · 600 · 36px · 1.1
Headline Three
EB Garamond · 500 · 24px · 1.3
Body text for paragraphs and long-form content.
EB Garamond · 400 · 18px · 1.8
Caption and metadata text
Outfit · 400 · 14px · 1.5
In Context
Past Meets Pixel
Five centuries compressed into one pairing
Outfit was born for screens; EB Garamond carries 500 years of typographic wisdom. Together, they prove that innovation and tradition aren't opposites. They're dance partners.
“In order to be irreplaceable, one must always be different.”
Coco Chanel
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=Outfit:wght@400;600;700&family=EB+Garamond:wght@400;500&display=swap" rel="stylesheet">h1 {
font-family: "Outfit", sans-serif;
font-size: 54px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
}
h2 {
font-family: "Outfit", sans-serif;
font-size: 36px;
font-weight: 600;
line-height: 1.1;
}
h3 {
font-family: "EB Garamond", serif;
font-size: 24px;
font-weight: 500;
line-height: 1.3;
}
.body-text {
font-family: "EB Garamond", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
}
.caption {
font-family: "Outfit", 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: {
outfit: [""Outfit"", "sans-serif"],
ebgaramond: [""EB Garamond"", "serif"],
},
fontSize: {
"h1": ["54px", { lineHeight: "1", fontWeight: "700" }],
"h2": ["36px", { lineHeight: "1.1", fontWeight: "600" }],
"h3": ["24px", { lineHeight: "1.3", fontWeight: "500" }],
"body": ["18px", { lineHeight: "1.8", 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: Outfit, 700 weight Used for H1–H3 Geometric sans designed for the future. Clean, versatile, and screen-optimized. Body: EB Garamond, 400 weight Used for paragraphs and UI Revival of Claude Garamond's original designs. Timeless elegance for serious typography. Tone: modern, classic, elegant Ultra-modern geometry meets Renaissance elegance. Outfit's clean precision paired with EB Garamond's timeless sophistication. Use this scale: H1 — 54px / 1 / -0.02em H2 — 36px / 1.1 H3 — 24px / 1.3 Body — 18px / 1.8 Caption — 14px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Outfit — 700 — 54px — line-height 1 — letter-spacing -0.02em H2 — Outfit — 600 — 36px — line-height 1.1 H3 — EB Garamond — 500 — 24px — line-height 1.3 Body — EB Garamond — 400 — 18px — line-height 1.8 Caption — Outfit — 400 — 14px — line-height 1.5 Headings should feel modern and classic. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.