Lora + DM Sans
Gentle Authority
Warmth without weakness
Lora's brushed curves bring organic warmth to headlines, while DM Sans provides the quiet confidence of geometric precision. Together, they create an inviting yet trustworthy editorial voice.
Warm and inviting. Lora's brushed curves and DM Sans's soft geometry create a cozy, approachable editorial feel.
Typefaces Used
Lora
Well-balanced contemporary serif optimized for body text and moderate headlines. Warm and readable.
Designed by Cyreal
Released 2011
Available weights: 400, 500, 600, 700
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
Lora · 700 · 42px · 1.15
Headline Two
Lora · 600 · 28px · 1.25
Headline Three
Lora · 600 · 22px · 1.3
Body text for paragraphs and long-form content.
DM Sans · 400 · 16px · 1.75
Caption and metadata text
DM Sans · 400 · 14px · 1.6
In Context
Gentle Authority
Warmth without weakness
Lora's brushed curves bring organic warmth to headlines, while DM Sans provides the quiet confidence of geometric precision. Together, they create an inviting yet trustworthy editorial voice.
“In character, in manner, in style, in all things, the supreme excellence is simplicity.”
Henry Wadsworth Longfellow
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=Lora:wght@600;700&family=DM+Sans:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Lora", serif;
font-size: 42px;
font-weight: 700;
line-height: 1.15;
}
h2 {
font-family: "Lora", serif;
font-size: 28px;
font-weight: 600;
line-height: 1.25;
}
h3 {
font-family: "Lora", 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.75;
}
.caption {
font-family: "DM Sans", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
lora: [""Lora"", "serif"],
dmsans: [""DM Sans"", "sans-serif"],
},
fontSize: {
"h1": ["42px", { lineHeight: "1.15", fontWeight: "700" }],
"h2": ["28px", { lineHeight: "1.25", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.3", fontWeight: "600" }],
"body": ["16px", { lineHeight: "1.75", fontWeight: "400" }],
"caption": ["14px", { lineHeight: "1.6", 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: Lora, 700 weight Used for H1–H3 Well-balanced contemporary serif optimized for body text and moderate headlines. Warm and readable. Body: DM Sans, 400 weight Used for paragraphs and UI Low-contrast geometric sans with friendly character. Excellent for UI and branding. Tone: warm, calm, editorial Warm and inviting. Lora's brushed curves and DM Sans's soft geometry create a cozy, approachable editorial feel. Use this scale: H1 — 42px / 1.15 H2 — 28px / 1.25 H3 — 22px / 1.3 Body — 16px / 1.75 Caption — 14px / 1.6
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Lora — 700 — 42px — line-height 1.15 H2 — Lora — 600 — 28px — line-height 1.25 H3 — Lora — 600 — 22px — line-height 1.3 Body — DM Sans — 400 — 16px — line-height 1.75 Caption — DM Sans — 400 — 14px — line-height 1.6 Headings should feel warm and calm. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.