Righteous + Nunito
Retro Future
Yesterday's tomorrow, today
Righteous channels the optimism of mid-century futurism. Space-age curves that still feel fresh. Nunito keeps the supporting text friendly and readable.
Retro-futuristic fun. Righteous's space-age curves create playful headlines while Nunito maintains friendly readability.
Typefaces Used
Righteous
Rounded geometric display. Fun and impactful for creative projects.
Designed by Astigmatic
Released 2011
Available weights: 400
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
Recommended Scale
Headline One
Righteous · 400 · 52px · 1.05
Headline Two
Righteous · 400 · 34px · 1.1
Headline Three
Nunito · 700 · 22px · 1.25
Body text for paragraphs and long-form content.
Nunito · 400 · 16px · 1.7
Caption and metadata text
Nunito · 400 · 14px · 1.5
In Context
Retro Future
Yesterday's tomorrow, today
Righteous channels the optimism of mid-century futurism. Space-age curves that still feel fresh. Nunito keeps the supporting text friendly and readable.
“The future ain't what it used to be.”
Yogi Berra
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=Righteous:wght@400&family=Nunito:wght@400;700&display=swap" rel="stylesheet">h1 {
font-family: "Righteous", sans-serif;
font-size: 52px;
font-weight: 400;
line-height: 1.05;
}
h2 {
font-family: "Righteous", sans-serif;
font-size: 34px;
font-weight: 400;
line-height: 1.1;
}
h3 {
font-family: "Nunito", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
}
.body-text {
font-family: "Nunito", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Nunito", 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: {
righteous: [""Righteous"", "sans-serif"],
nunito: [""Nunito"", "sans-serif"],
},
fontSize: {
"h1": ["52px", { lineHeight: "1.05", fontWeight: "400" }],
"h2": ["34px", { lineHeight: "1.1", fontWeight: "400" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "700" }],
"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: Righteous, 400 weight Used for H1–H3 Rounded geometric display. Fun and impactful for creative projects. Body: Nunito, 400 weight Used for paragraphs and UI Well-balanced sans with rounded terminals. Soft and friendly for interfaces. Tone: playful, bold, retro Retro-futuristic fun. Righteous's space-age curves create playful headlines while Nunito maintains friendly readability. Use this scale: H1 — 52px / 1.05 H2 — 34px / 1.1 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 — Righteous — 400 — 52px — line-height 1.05 H2 — Righteous — 400 — 34px — line-height 1.1 H3 — Nunito — 700 — 22px — line-height 1.25 Body — Nunito — 400 — 16px — line-height 1.7 Caption — Nunito — 400 — 14px — line-height 1.5 Headings should feel playful and bold. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.