Plus Jakarta Sans + Inter
Warm Precision
The friendly face of modern software
Contemporary geometric warmth meets systematic clarity. Plus Jakarta Sans brings approachability to headlines without sacrificing professionalism. The typographic handshake of SaaS done right.
Contemporary warmth for SaaS. Plus Jakarta's friendly geometry brings approachability to headlines, while Inter maintains the interface standard.
Typefaces Used
Plus Jakarta Sans
Contemporary geometric sans with subtle warmth. Rising star for SaaS and tech brands.
Designed by Tokotype
Released 2020
Available weights: 200, 300, 400, 500, 600, 700, 800
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
Plus Jakarta Sans · 700 · 44px · 1.15
Headline Two
Plus Jakarta Sans · 600 · 28px · 1.2
Headline Three
Plus Jakarta Sans · 600 · 20px · 1.3
Body text for paragraphs and long-form content.
Inter · 400 · 15px · 1.7
Caption and metadata text
Inter · 400 · 13px · 1.5
In Context
Warm Precision
The friendly face of modern software
Contemporary geometric warmth meets systematic clarity. Plus Jakarta Sans brings approachability to headlines without sacrificing professionalism. The typographic handshake of SaaS done right.
“Simplicity is the ultimate sophistication.”
Leonardo da Vinci
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=Plus+Jakarta+Sans:wght@600;700&family=Inter:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
h2 {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
}
h3 {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.3;
}
.body-text {
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
plusjakartasans: [""Plus Jakarta Sans"", "sans-serif"],
inter: [""Inter"", "sans-serif"],
},
fontSize: {
"h1": ["44px", { lineHeight: "1.15", fontWeight: "700" }],
"h2": ["28px", { lineHeight: "1.2", fontWeight: "600" }],
"h3": ["20px", { lineHeight: "1.3", fontWeight: "600" }],
"body": ["15px", { lineHeight: "1.7", fontWeight: "400" }],
"caption": ["13px", { 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: Plus Jakarta Sans, 700 weight Used for H1–H3 Contemporary geometric sans with subtle warmth. Rising star for SaaS and tech brands. 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, professional, warm Contemporary warmth for SaaS. Plus Jakarta's friendly geometry brings approachability to headlines, while Inter maintains the interface standard. Use this scale: H1 — 44px / 1.15 / -0.02em H2 — 28px / 1.2 / -0.01em H3 — 20px / 1.3 Body — 15px / 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 — Plus Jakarta Sans — 700 — 44px — line-height 1.15 — letter-spacing -0.02em H2 — Plus Jakarta Sans — 600 — 28px — line-height 1.2 — letter-spacing -0.01em H3 — Plus Jakarta Sans — 600 — 20px — line-height 1.3 Body — Inter — 400 — 15px — line-height 1.7 Caption — Inter — 400 — 13px — line-height 1.5 Headings should feel modern and professional. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.