Nunito + Open Sans
Approachable Excellence
Soft edges, hard results
Nunito's rounded terminals say 'welcome' without trying too hard. Open Sans handles the details with quiet competence. Together, they build trust one pixel at a time.
Rounded friendliness meets reliable neutrality. Nunito's soft terminals create warmth while Open Sans provides universal readability.
Typefaces Used
Nunito
Well-balanced sans with rounded terminals. Soft and friendly for interfaces.
Designed by Vernon Adams
Released 2014
Available weights: 200, 300, 400, 500, 600, 700, 800, 900
Open Sans
Humanist sans-serif with neutral, friendly appearance. A web typography workhorse.
Designed by Steve Matteson
Released 2011
Available weights: 300, 400, 500, 600, 700, 800
Recommended Scale
Headline One
Nunito · 800 · 46px · 1.1
Headline Two
Nunito · 700 · 30px · 1.2
Headline Three
Nunito · 600 · 22px · 1.25
Body text for paragraphs and long-form content.
Open Sans · 400 · 16px · 1.7
Caption and metadata text
Open Sans · 400 · 14px · 1.5
In Context
Approachable Excellence
Soft edges, hard results
Nunito's rounded terminals say 'welcome' without trying too hard. Open Sans handles the details with quiet competence. Together, they build trust one pixel at a time.
“Be so good they can't ignore you.”
Steve Martin
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=Nunito:wght@600;700;800&family=Open+Sans:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Nunito", sans-serif;
font-size: 46px;
font-weight: 800;
line-height: 1.1;
}
h2 {
font-family: "Nunito", sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1.2;
}
h3 {
font-family: "Nunito", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Open Sans", 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: {
nunito: [""Nunito"", "sans-serif"],
opensans: [""Open Sans"", "sans-serif"],
},
fontSize: {
"h1": ["46px", { lineHeight: "1.1", fontWeight: "800" }],
"h2": ["30px", { lineHeight: "1.2", fontWeight: "700" }],
"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: Nunito, 800 weight Used for H1–H3 Well-balanced sans with rounded terminals. Soft and friendly for interfaces. Body: Open Sans, 400 weight Used for paragraphs and UI Humanist sans-serif with neutral, friendly appearance. A web typography workhorse. Tone: friendly, warm, rounded Rounded friendliness meets reliable neutrality. Nunito's soft terminals create warmth while Open Sans provides universal readability. Use this scale: H1 — 46px / 1.1 H2 — 30px / 1.2 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 — Nunito — 800 — 46px — line-height 1.1 H2 — Nunito — 700 — 30px — line-height 1.2 H3 — Nunito — 600 — 22px — line-height 1.25 Body — Open Sans — 400 — 16px — line-height 1.7 Caption — Open Sans — 400 — 14px — line-height 1.5 Headings should feel friendly and warm. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.