Clash Display + Inter
Sharp Angles
Contemporary edge for modern brands
Clash Display cuts through mediocrity with geometric precision. Its sharp forms make memorable headlines while Inter maintains the clarity your interface demands.
Contemporary display power. Clash Display's sharp geometry makes striking headlines while Inter provides digital precision.
Typefaces Used
Clash Display
Contemporary display with sharp geometry. Trending for tech and creative brands.
Designed by Indian Type Foundry
Released 2021
Available weights: 200, 300, 400, 500, 600, 700
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
Clash Display · 700 · 56px · 1
Headline Two
Clash Display · 600 · 36px · 1.1
Headline Three
Inter · 600 · 22px · 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
Sharp Angles
Contemporary edge for modern brands
Clash Display cuts through mediocrity with geometric precision. Its sharp forms make memorable headlines while Inter maintains the clarity your interface demands.
“Design is intelligence made visible.”
Alina Wheeler
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=Clash+Display:wght@600;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">h1 {
font-family: "Clash Display", sans-serif;
font-size: 56px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
}
h2 {
font-family: "Clash Display", sans-serif;
font-size: 36px;
font-weight: 600;
line-height: 1.1;
}
h3 {
font-family: "Inter", sans-serif;
font-size: 22px;
font-weight: 600;
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: {
clashdisplay: [""Clash Display"", "sans-serif"],
inter: [""Inter"", "sans-serif"],
},
fontSize: {
"h1": ["56px", { lineHeight: "1", fontWeight: "700" }],
"h2": ["36px", { lineHeight: "1.1", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "600" }],
"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: Clash Display, 700 weight Used for H1–H3 Contemporary display with sharp geometry. Trending for tech and creative brands. Body: Inter, 400 weight Used for paragraphs and UI The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes. Tone: bold, modern, striking Contemporary display power. Clash Display's sharp geometry makes striking headlines while Inter provides digital precision. Use this scale: H1 — 56px / 1 / -0.02em H2 — 36px / 1.1 H3 — 22px / 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 — Clash Display — 700 — 56px — line-height 1 — letter-spacing -0.02em H2 — Clash Display — 600 — 36px — line-height 1.1 H3 — Inter — 600 — 22px — line-height 1.25 Body — Inter — 400 — 16px — line-height 1.7 Caption — Inter — 400 — 14px — line-height 1.5 Headings should feel bold and modern. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.