Cormorant + Jost
Haute Typography
Where luxury meets modernity
Cormorant's delicate elegance speaks to the finer things, while Jost's geometric clarity keeps the message modern. This is the typography of aspiration. Timeless yet contemporary.
High fashion typography. Cormorant's delicate elegance paired with Jost's geometric refinement for luxury brands.
Typefaces Used
Cormorant Garamond
Display version of the timeless Garamond. High contrast and refined for large sizes.
Designed by Christian Thalmann
Released 2015
Available weights: 300, 400, 500, 600, 700
Jost
Geometric sans inspired by Futura. Elegant and refined with optical sizing.
Designed by Owen Earl
Released 2020
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Cormorant Garamond · 600 · 56px · 1.05
Headline Two
Cormorant Garamond · 500 · 38px · 1.15
Headline Three
Jost · 500 · 22px · 1.25
Body text for paragraphs and long-form content.
Jost · 400 · 16px · 1.7
Caption and metadata text
Jost · 400 · 13px · 1.5
In Context
Haute Typography
Where luxury meets modernity
Cormorant's delicate elegance speaks to the finer things, while Jost's geometric clarity keeps the message modern. This is the typography of aspiration. Timeless yet contemporary.
“Luxury must be comfortable, otherwise it is not luxury.”
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=Cormorant+Garamond:wght@500;600&family=Jost:wght@400;500&display=swap" rel="stylesheet">h1 {
font-family: "Cormorant Garamond", serif;
font-size: 56px;
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.01em;
}
h2 {
font-family: "Cormorant Garamond", serif;
font-size: 38px;
font-weight: 500;
line-height: 1.15;
}
h3 {
font-family: "Jost", sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.02em;
}
.body-text {
font-family: "Jost", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Jost", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.03em;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
cormorantgaramond: [""Cormorant Garamond"", "serif"],
jost: [""Jost"", "sans-serif"],
},
fontSize: {
"h1": ["56px", { lineHeight: "1.05", fontWeight: "600" }],
"h2": ["38px", { lineHeight: "1.15", fontWeight: "500" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "500" }],
"body": ["16px", { lineHeight: "1.7", 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: Cormorant Garamond, 600 weight Used for H1–H3 Display version of the timeless Garamond. High contrast and refined for large sizes. Body: Jost, 400 weight Used for paragraphs and UI Geometric sans inspired by Futura. Elegant and refined with optical sizing. Tone: luxury, elegant, sophisticated High fashion typography. Cormorant's delicate elegance paired with Jost's geometric refinement for luxury brands. Use this scale: H1 — 56px / 1.05 / -0.01em H2 — 38px / 1.15 H3 — 22px / 1.25 / 0.02em Body — 16px / 1.7 Caption — 13px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Cormorant Garamond — 600 — 56px — line-height 1.05 — letter-spacing -0.01em H2 — Cormorant Garamond — 500 — 38px — line-height 1.15 H3 — Jost — 500 — 22px — line-height 1.25 — letter-spacing 0.02em Body — Jost — 400 — 16px — line-height 1.7 Caption — Jost — 400 — 13px — line-height 1.5 Headings should feel luxury and elegant. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.