Archivo + Inter
Structured Growth
Grotesque power, Swiss precision
Archivo's strong backbone supports headlines that mean business. Inter's systematic approach ensures every interface element falls into place. Enterprise-ready from day one.
Grotesque power meets Swiss clarity. Archivo's strong headlines paired with Inter's precise interface typography.
Typefaces Used
Archivo
Grotesque sans designed for web and interfaces. Robust with wide width range.
Designed by Omnibus-Type
Released 2012
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
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
Archivo · 700 · 46px · 1.1
Headline Two
Archivo · 600 · 30px · 1.15
Headline Three
Archivo · 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
Structured Growth
Grotesque power, Swiss precision
Archivo's strong backbone supports headlines that mean business. Inter's systematic approach ensures every interface element falls into place. Enterprise-ready from day one.
“Structure creates freedom.”
Unknown
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=Archivo:wght@600;700&family=Inter:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Archivo", sans-serif;
font-size: 46px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-family: "Archivo", sans-serif;
font-size: 30px;
font-weight: 600;
line-height: 1.15;
}
h3 {
font-family: "Archivo", 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: {
archivo: [""Archivo"", "sans-serif"],
inter: [""Inter"", "sans-serif"],
},
fontSize: {
"h1": ["46px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["30px", { lineHeight: "1.15", 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: Archivo, 700 weight Used for H1–H3 Grotesque sans designed for web and interfaces. Robust with wide width range. Body: Inter, 400 weight Used for paragraphs and UI The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes. Tone: modern, professional, tech Grotesque power meets Swiss clarity. Archivo's strong headlines paired with Inter's precise interface typography. Use this scale: H1 — 46px / 1.1 / -0.02em H2 — 30px / 1.15 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 — Archivo — 700 — 46px — line-height 1.1 — letter-spacing -0.02em H2 — Archivo — 600 — 30px — line-height 1.15 H3 — Archivo — 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 modern and professional. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.