Fraunces + DM Sans
Expressive Soul
Personality that refuses to be ignored
Fraunces brings unapologetic character with its soft, 'wonky' forms. Type that makes an instant impression. DM Sans provides the neutral counterweight, letting the headline personality shine.
Playful and confident. Fraunces's expressive personality makes an instant impression, balanced by DM Sans's friendly neutrality.
Typefaces Used
Fraunces
Expressive variable serif with 'wonky' axis. Perfect for brands that want personality.
Designed by Undercase Type
Released 2020
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
Fraunces · 700 · 52px · 1.05
Headline Two
Fraunces · 600 · 34px · 1.15
Headline Three
DM Sans · 600 · 22px · 1.3
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
Expressive Soul
Personality that refuses to be ignored
Fraunces brings unapologetic character with its soft, 'wonky' forms. Type that makes an instant impression. DM Sans provides the neutral counterweight, letting the headline personality shine.
“Have no fear of perfection. You'll never reach it.”
Salvador Dalí
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=Fraunces:wght@600;700&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">h1 {
font-family: "Fraunces", serif;
font-size: 52px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
}
h2 {
font-family: "Fraunces", serif;
font-size: 34px;
font-weight: 600;
line-height: 1.15;
}
h3 {
font-family: "DM Sans", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.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: {
fraunces: [""Fraunces"", "serif"],
dmsans: [""DM Sans"", "sans-serif"],
},
fontSize: {
"h1": ["52px", { lineHeight: "1.05", fontWeight: "700" }],
"h2": ["34px", { lineHeight: "1.15", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.3", 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: Fraunces, 700 weight Used for H1–H3 Expressive variable serif with 'wonky' axis. Perfect for brands that want personality. Body: DM Sans, 400 weight Used for paragraphs and UI Low-contrast geometric sans with friendly character. Excellent for UI and branding. Tone: playful, warm, bold Playful and confident. Fraunces's expressive personality makes an instant impression, balanced by DM Sans's friendly neutrality. Use this scale: H1 — 52px / 1.05 / -0.02em H2 — 34px / 1.15 H3 — 22px / 1.3 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 — Fraunces — 700 — 52px — line-height 1.05 — letter-spacing -0.02em H2 — Fraunces — 600 — 34px — line-height 1.15 H3 — DM Sans — 600 — 22px — line-height 1.3 Body — DM Sans — 400 — 16px — line-height 1.7 Caption — DM Sans — 500 — 13px — line-height 1.5 Headings should feel playful and warm. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.