Crimson Pro + Work Sans
Renaissance Renewed
Classical forms for modern screens
The humanist tradition lives on in digital form. Crimson Pro channels the elegance of old-style typefaces while embracing the technical demands of contemporary web design. Heritage without nostalgia.
Old-style elegance meets geometric warmth. Crimson Pro's refined Garamond-inspired forms pair beautifully with Work Sans's friendly neutrality.
Typefaces Used
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
Work Sans
Grotesque sans optimized for on-screen text. Friendly and highly readable.
Designed by Wei Huang
Released 2014
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Crimson Pro · 600 · 48px · 1.1
Headline Two
Crimson Pro · 600 · 32px · 1.2
Headline Three
Crimson Pro · 500 · 24px · 1.3
Body text for paragraphs and long-form content.
Crimson Pro · 400 · 18px · 1.75
Caption and metadata text
Work Sans · 400 · 14px · 1.5
In Context
Renaissance Renewed
Classical forms for modern screens
The humanist tradition lives on in digital form. Crimson Pro channels the elegance of old-style typefaces while embracing the technical demands of contemporary web design. Heritage without nostalgia.
“Study the past if you would define the future.”
Confucius
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=Crimson+Pro:wght@400;500;600&family=Work+Sans:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Crimson Pro", serif;
font-size: 48px;
font-weight: 600;
line-height: 1.1;
}
h2 {
font-family: "Crimson Pro", serif;
font-size: 32px;
font-weight: 600;
line-height: 1.2;
}
h3 {
font-family: "Crimson Pro", serif;
font-size: 24px;
font-weight: 500;
line-height: 1.3;
}
.body-text {
font-family: "Crimson Pro", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.75;
}
.caption {
font-family: "Work Sans", 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: {
crimsonpro: [""Crimson Pro"", "serif"],
worksans: [""Work Sans"", "sans-serif"],
},
fontSize: {
"h1": ["48px", { lineHeight: "1.1", fontWeight: "600" }],
"h2": ["32px", { lineHeight: "1.2", fontWeight: "600" }],
"h3": ["24px", { lineHeight: "1.3", fontWeight: "500" }],
"body": ["18px", { lineHeight: "1.75", 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: Crimson Pro, 600 weight Used for H1–H3 Updated version of Crimson Text. Beautiful for long-form reading and editorial. Body: Crimson Pro, 400 weight Used for paragraphs and UI Updated version of Crimson Text. Beautiful for long-form reading and editorial. Tone: elegant, warm, editorial Old-style elegance meets geometric warmth. Crimson Pro's refined Garamond-inspired forms pair beautifully with Work Sans's friendly neutrality. Use this scale: H1 — 48px / 1.1 H2 — 32px / 1.2 H3 — 24px / 1.3 Body — 18px / 1.75 Caption — 14px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Crimson Pro — 600 — 48px — line-height 1.1 H2 — Crimson Pro — 600 — 32px — line-height 1.2 H3 — Crimson Pro — 500 — 24px — line-height 1.3 Body — Crimson Pro — 400 — 18px — line-height 1.75 Caption — Work Sans — 400 — 14px — line-height 1.5 Headings should feel elegant and warm. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.