Playfair Display + Raleway
Editorial Luxury
The magazine aesthetic, digitized
Playfair Display's high-contrast drama evokes fashion spreads and premium publications. Raleway's elegant geometry provides the supporting sophistication every luxury brand deserves.
Editorial luxury. Playfair's high-contrast elegance paired with Raleway's refined geometric forms for aspirational brands.
Typefaces Used
Playfair Display
High-contrast transitional serif with elegant, editorial presence. Perfect for luxury brands and sophisticated headlines.
Designed by Claus Eggers Sørensen
Released 2011
Available weights: 400, 500, 600, 700, 800, 900
Raleway
Elegant geometric sans originally for display. Distinctive in light weights.
Designed by Matt McInerney
Released 2010
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Playfair Display · 700 · 52px · 1.05
Headline Two
Playfair Display · 600 · 34px · 1.15
Headline Three
Raleway · 600 · 22px · 1.25
Body text for paragraphs and long-form content.
Raleway · 400 · 16px · 1.75
Caption and metadata text
Raleway · 500 · 12px · 1.5
In Context
Editorial Luxury
The magazine aesthetic, digitized
Playfair Display's high-contrast drama evokes fashion spreads and premium publications. Raleway's elegant geometry provides the supporting sophistication every luxury brand deserves.
“Style is a way to say who you are without speaking.”
Rachel Zoe
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=Playfair+Display:wght@600;700&family=Raleway:wght@400;500;600&display=swap" rel="stylesheet">h1 {
font-family: "Playfair Display", serif;
font-size: 52px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
}
h2 {
font-family: "Playfair Display", serif;
font-size: 34px;
font-weight: 600;
line-height: 1.15;
}
h3 {
font-family: "Raleway", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "Raleway", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.75;
}
.caption {
font-family: "Raleway", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
playfairdisplay: [""Playfair Display"", "serif"],
raleway: [""Raleway"", "sans-serif"],
},
fontSize: {
"h1": ["52px", { lineHeight: "1.05", fontWeight: "700" }],
"h2": ["34px", { lineHeight: "1.15", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "600" }],
"body": ["16px", { lineHeight: "1.75", fontWeight: "400" }],
"caption": ["12px", { lineHeight: "1.5", fontWeight: "500" }],
},
},
},
};
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: Playfair Display, 700 weight Used for H1–H3 High-contrast transitional serif with elegant, editorial presence. Perfect for luxury brands and sophisticated headlines. Body: Raleway, 400 weight Used for paragraphs and UI Elegant geometric sans originally for display. Distinctive in light weights. Tone: luxury, elegant, stylish Editorial luxury. Playfair's high-contrast elegance paired with Raleway's refined geometric forms for aspirational brands. Use this scale: H1 — 52px / 1.05 / -0.02em H2 — 34px / 1.15 H3 — 22px / 1.25 Body — 16px / 1.75 Caption — 12px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Playfair Display — 700 — 52px — line-height 1.05 — letter-spacing -0.02em H2 — Playfair Display — 600 — 34px — line-height 1.15 H3 — Raleway — 600 — 22px — line-height 1.25 Body — Raleway — 400 — 16px — line-height 1.75 Caption — Raleway — 500 — 12px — 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.