Space Grotesk + Playfair Display
Tension by Design
When tech culture meets editorial tradition
The deliberate friction between Space Grotesk's digital-native quirks and Playfair's high-contrast elegance creates visual interest that demands attention. Opposites attract.
Tech-forward meets high-contrast elegance. Space Grotesk's distinctive character paired with Playfair's editorial drama.
Typefaces Used
Space Grotesk
Geometric sans with distinctive character. Tech-forward yet approachable.
Designed by Florian Karsten
Released 2018
Available weights: 300, 400, 500, 600, 700
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
Recommended Scale
Headline One
Space Grotesk · 700 · 52px · 1
Headline Two
Playfair Display · 600 · 36px · 1.1
Headline Three
Playfair Display · 500 · 26px · 1.25
Body text for paragraphs and long-form content.
Space Grotesk · 400 · 16px · 1.7
Caption and metadata text
Space Grotesk · 400 · 14px · 1.5
In Context
Tension by Design
When tech culture meets editorial tradition
The deliberate friction between Space Grotesk's digital-native quirks and Playfair's high-contrast elegance creates visual interest that demands attention. Opposites attract.
“Creativity is just connecting things.”
Steve Jobs
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=Space+Grotesk:wght@400;700&family=Playfair+Display:wght@500;600&display=swap" rel="stylesheet">h1 {
font-family: "Space Grotesk", sans-serif;
font-size: 52px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
}
h2 {
font-family: "Playfair Display", serif;
font-size: 36px;
font-weight: 600;
line-height: 1.1;
}
h3 {
font-family: "Playfair Display", serif;
font-size: 26px;
font-weight: 500;
line-height: 1.25;
}
.body-text {
font-family: "Space Grotesk", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Space Grotesk", 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: {
spacegrotesk: [""Space Grotesk"", "sans-serif"],
playfairdisplay: [""Playfair Display"", "serif"],
},
fontSize: {
"h1": ["52px", { lineHeight: "1", fontWeight: "700" }],
"h2": ["36px", { lineHeight: "1.1", fontWeight: "600" }],
"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: Space Grotesk, 700 weight Used for H1–H3 Geometric sans with distinctive character. Tech-forward yet approachable. Body: Space Grotesk, 400 weight Used for paragraphs and UI Geometric sans with distinctive character. Tech-forward yet approachable. Tone: bold, elegant, editorial Tech-forward meets high-contrast elegance. Space Grotesk's distinctive character paired with Playfair's editorial drama. Use this scale: H1 — 52px / 1 / -0.03em H2 — 36px / 1.1 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 — Space Grotesk — 700 — 52px — line-height 1 — letter-spacing -0.03em H2 — Playfair Display — 600 — 36px — line-height 1.1 H3 — Playfair Display — 500 — 26px — line-height 1.25 Body — Space Grotesk — 400 — 16px — line-height 1.7 Caption — Space Grotesk — 400 — 14px — line-height 1.5 Headings should feel bold and elegant. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.