Manrope
Typography Matters
The invisible art that shapes how we read
Great typography disappears into the reading experience, guiding the eye without calling attention to itself. The best font pairings create harmony between form and function.
A single-family solution with character. Manrope's distinctive letterforms and wide weight range make it versatile enough to handle both headlines and body text.
Typefaces Used
Manrope
Semi-condensed geometric sans with humanist touches. Distinctive yet highly functional.
Designed by Mikhail Sharanda
Released 2018
Available weights: 200, 300, 400, 500, 600, 700, 800
Recommended Scale
Headline One
Manrope · 700 · 48px · 1.1
Headline Two
Manrope · 600 · 32px · 1.2
Headline Three
Manrope · 600 · 22px · 1.3
Body text for paragraphs and long-form content.
Manrope · 400 · 16px · 1.7
Caption and metadata text
Manrope · 500 · 13px · 1.5
In Context
Typography Matters
The invisible art that shapes how we read
Great typography disappears into the reading experience, guiding the eye without calling attention to itself. The best font pairings create harmony between form and function.
“Typography is the voice of design.”
Unknown
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=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">h1 {
font-family: "Manrope", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
}
h2 {
font-family: "Manrope", sans-serif;
font-size: 32px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
}
h3 {
font-family: "Manrope", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
}
.body-text {
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Manrope", 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: {
manrope: [""Manrope"", "sans-serif"],
},
fontSize: {
"h1": ["48px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["32px", { lineHeight: "1.2", 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: Manrope, 700 weight Used for H1–H3 Semi-condensed geometric sans with humanist touches. Distinctive yet highly functional. Body: Manrope, 400 weight Used for paragraphs and UI Semi-condensed geometric sans with humanist touches. Distinctive yet highly functional. Tone: minimal, modern, professional A single-family solution with character. Manrope's distinctive letterforms and wide weight range make it versatile enough to handle both headlines and body text. Use this scale: H1 — 48px / 1.1 / -0.03em H2 — 32px / 1.2 / -0.02em H3 — 22px / 1.3 / -0.01em 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 — Manrope — 700 — 48px — line-height 1.1 — letter-spacing -0.03em H2 — Manrope — 600 — 32px — line-height 1.2 — letter-spacing -0.02em H3 — Manrope — 600 — 22px — line-height 1.3 — letter-spacing -0.01em Body — Manrope — 400 — 16px — line-height 1.7 Caption — Manrope — 500 — 13px — line-height 1.5 Headings should feel minimal and modern. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.