Chivo + DM Sans
Strong Foundations
Grotesque confidence for modern brands
Chivo's bold presence creates headlines that command respect. DM Sans softens the approach with friendly geometry, balancing strength with approachability.
Grotesque confidence meets friendly geometry. Chivo's strong presence paired with DM Sans's approachable warmth.
Typefaces Used
Chivo
Grotesque sans family with strong personality. Versatile for headlines and text.
Designed by Omnibus-Type
Released 2011
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
DM Sans
Low-contrast geometric sans with friendly character. Excellent for UI and branding.
Designed by Colophon Foundry
Released 2019
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Chivo · 900 · 48px · 1.05
Headline Two
Chivo · 700 · 32px · 1.15
Headline Three
Chivo · 600 · 22px · 1.25
Body text for paragraphs and long-form content.
DM Sans · 400 · 16px · 1.7
Caption and metadata text
DM Sans · 500 · 13px · 1.5
In Context
Strong Foundations
Grotesque confidence for modern brands
Chivo's bold presence creates headlines that command respect. DM Sans softens the approach with friendly geometry, balancing strength with approachability.
“Strength does not come from physical capacity. It comes from an indomitable will.”
Mahatma Gandhi
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=Chivo:wght@600;700;900&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">h1 {
font-family: "Chivo", sans-serif;
font-size: 48px;
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.02em;
}
h2 {
font-family: "Chivo", sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.15;
}
h3 {
font-family: "Chivo", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "DM Sans", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "DM Sans", 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: {
chivo: [""Chivo"", "sans-serif"],
dmsans: [""DM Sans"", "sans-serif"],
},
fontSize: {
"h1": ["48px", { lineHeight: "1.05", fontWeight: "900" }],
"h2": ["32px", { lineHeight: "1.15", fontWeight: "700" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "600" }],
"body": ["16px", { lineHeight: "1.7", 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: Chivo, 900 weight Used for H1–H3 Grotesque sans family with strong personality. Versatile for headlines and text. Body: DM Sans, 400 weight Used for paragraphs and UI Low-contrast geometric sans with friendly character. Excellent for UI and branding. Tone: modern, bold, professional Grotesque confidence meets friendly geometry. Chivo's strong presence paired with DM Sans's approachable warmth. Use this scale: H1 — 48px / 1.05 / -0.02em H2 — 32px / 1.15 H3 — 22px / 1.25 Body — 16px / 1.7 Caption — 13px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Chivo — 900 — 48px — line-height 1.05 — letter-spacing -0.02em H2 — Chivo — 700 — 32px — line-height 1.15 H3 — Chivo — 600 — 22px — line-height 1.25 Body — DM Sans — 400 — 16px — line-height 1.7 Caption — DM Sans — 500 — 13px — line-height 1.5 Headings should feel modern and bold. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.