Try your own text
Archivo + Crimson Pro
Authoritative Warmth
The voice of trusted institutions
Archivo's grotesque strength commands the headline while Crimson Pro's old-style warmth invites deeper reading. A pairing for organizations that lead with confidence and connect with heart.
Strong grotesque meets warm old-style. Archivo's robust headlines paired with Crimson Pro's refined reading experience.
About this pairing
Strong grotesque meets warm old-style. Archivo's robust headlines paired with Crimson Pro's refined reading experience.
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
Crimson Pro
Updated version of Crimson Text. Beautiful for long-form reading and editorial.
Designed by Jacques Le Bailly
Released 2018
Available weights: 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Archivo · 800 · 48px · 1.05
Headline Two
Archivo · 700 · 32px · 1.15
Headline Three
Crimson Pro · 600 · 24px · 1.25
Body text for paragraphs and long-form content.
Crimson Pro · 400 · 18px · 1.75
Caption and metadata text
Archivo · 500 · 13px · 1.5
In Context
Authoritative Warmth
The voice of trusted institutions
Archivo's grotesque strength commands the headline while Crimson Pro's old-style warmth invites deeper reading. A pairing for organizations that lead with confidence and connect with heart.
“The measure of intelligence is the ability to change.”
Albert Einstein
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@500;700;800&family=Crimson+Pro:wght@400;600&display=swap" rel="stylesheet">h1 {
font-family: "Archivo", sans-serif;
font-size: 48px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
}
h2 {
font-family: "Archivo", sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
}
h3 {
font-family: "Crimson Pro", serif;
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "Crimson Pro", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.75;
}
.caption {
font-family: "Archivo", sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
archivo: [""Archivo"", "sans-serif"],
crimsonpro: [""Crimson Pro"", "serif"],
},
fontSize: {
"h1": ["48px", { lineHeight: "1.05", fontWeight: "800" }],
"h2": ["32px", { lineHeight: "1.15", fontWeight: "700" }],
"h3": ["24px", { lineHeight: "1.25", fontWeight: "600" }],
"body": ["18px", { lineHeight: "1.75", fontWeight: "400" }],
"caption": ["13px", { 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: Archivo, 800 weight Used for H1–H3 Grotesque sans designed for web and interfaces. Robust with wide width range. Body: Crimson Pro, 400 weight Used for paragraphs and UI Updated version of Crimson Text. Beautiful for long-form reading and editorial. Tone: bold, warm, editorial Strong grotesque meets warm old-style. Archivo's robust headlines paired with Crimson Pro's refined reading experience. Use this scale: H1 — 48px / 1.05 / -0.02em H2 — 32px / 1.15 H3 — 24px / 1.25 Body — 18px / 1.75 Caption — 13px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Archivo — 800 — 48px — line-height 1.05 — letter-spacing -0.02em H2 — Archivo — 700 — 32px — line-height 1.15 H3 — Crimson Pro — 600 — 24px — line-height 1.25 Body — Crimson Pro — 400 — 18px — line-height 1.75 Caption — Archivo — 500 — 13px — line-height 1.5 Headings should feel bold and warm. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.