Poppins + DM Sans
Bold Moves
Geometric confidence for growing brands
Poppins' circular forms make a statement without shouting. DM Sans provides the supporting cast every headline needs. This is typography with startup energy.
Geometric boldness meets soft geometry. Poppins' circular forms command attention while DM Sans keeps body text comfortable.
Typefaces Used
Poppins
Geometric sans with perfect circles. Popular for tech and startup brands.
Designed by Indian Type Foundry
Released 2014
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
Poppins · 700 · 48px · 1.1
Headline Two
Poppins · 600 · 32px · 1.15
Headline Three
Poppins · 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
Bold Moves
Geometric confidence for growing brands
Poppins' circular forms make a statement without shouting. DM Sans provides the supporting cast every headline needs. This is typography with startup energy.
“Stay hungry, stay foolish.”
Steve Jobs
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=Poppins:wght@600;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">h1 {
font-family: "Poppins", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-family: "Poppins", sans-serif;
font-size: 32px;
font-weight: 600;
line-height: 1.15;
}
h3 {
font-family: "Poppins", 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: {
poppins: [""Poppins"", "sans-serif"],
dmsans: [""DM Sans"", "sans-serif"],
},
fontSize: {
"h1": ["48px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["32px", { lineHeight: "1.15", fontWeight: "600" }],
"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: Poppins, 700 weight Used for H1–H3 Geometric sans with perfect circles. Popular for tech and startup brands. 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, tech Geometric boldness meets soft geometry. Poppins' circular forms command attention while DM Sans keeps body text comfortable. Use this scale: H1 — 48px / 1.1 / -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 — Poppins — 700 — 48px — line-height 1.1 — letter-spacing -0.02em H2 — Poppins — 600 — 32px — line-height 1.15 H3 — Poppins — 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.