Figtree + Inter
Launch Ready
Friendly typography for ambitious teams
Figtree's warm geometry gives your brand an approachable personality from day one. Combined with Inter's interface reliability, you're equipped to scale from MVP to market leader.
Friendly geometry for modern startups. Figtree's warm, approachable forms make headlines inviting while Inter handles body text reliably.
Typefaces Used
Figtree
Friendly geometric sans with warm character. Rising star for modern interfaces.
Designed by Erik Kennedy
Released 2022
Available weights: 300, 400, 500, 600, 700, 800, 900
Inter
The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.
Designed by Rasmus Andersson
Released 2016
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Figtree · 700 · 48px · 1.1
Headline Two
Figtree · 600 · 32px · 1.15
Headline Three
Figtree · 600 · 22px · 1.25
Body text for paragraphs and long-form content.
Inter · 400 · 16px · 1.7
Caption and metadata text
Inter · 400 · 14px · 1.5
In Context
Launch Ready
Friendly typography for ambitious teams
Figtree's warm geometry gives your brand an approachable personality from day one. Combined with Inter's interface reliability, you're equipped to scale from MVP to market leader.
“Move fast and make things.”
Mark Zuckerberg (modified)
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=Figtree:wght@600;700&family=Inter:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Figtree", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-family: "Figtree", sans-serif;
font-size: 32px;
font-weight: 600;
line-height: 1.15;
}
h3 {
font-family: "Figtree", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
figtree: [""Figtree"", "sans-serif"],
inter: [""Inter"", "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": ["14px", { lineHeight: "1.5", 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: Figtree, 700 weight Used for H1–H3 Friendly geometric sans with warm character. Rising star for modern interfaces. Body: Inter, 400 weight Used for paragraphs and UI The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes. Tone: modern, warm, friendly Friendly geometry for modern startups. Figtree's warm, approachable forms make headlines inviting while Inter handles body text reliably. Use this scale: H1 — 48px / 1.1 / -0.02em H2 — 32px / 1.15 H3 — 22px / 1.25 Body — 16px / 1.7 Caption — 14px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Figtree — 700 — 48px — line-height 1.1 — letter-spacing -0.02em H2 — Figtree — 600 — 32px — line-height 1.15 H3 — Figtree — 600 — 22px — line-height 1.25 Body — Inter — 400 — 16px — line-height 1.7 Caption — Inter — 400 — 14px — line-height 1.5 Headings should feel modern and warm. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.