Alegreya + Nunito
Literary Grace
Where books meet browsers
Alegreya's calligraphic heritage makes every headline feel considered, while Nunito's rounded forms ensure digital comfort. A pairing for those who believe in the power of words.
Literary elegance meets friendly roundness. Alegreya's calligraphic grace paired with Nunito's soft terminals.
Typefaces Used
Alegreya
Dynamic serif with calligraphic personality. Excellent for literary and editorial work.
Designed by Juan Pablo del Peral
Released 2011
Available weights: 400, 500, 600, 700, 800, 900
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
Alegreya · 700 · 48px · 1.1
Headline Two
Alegreya · 600 · 32px · 1.2
Headline Three
Alegreya · 500 · 24px · 1.3
Body text for paragraphs and long-form content.
Alegreya · 400 · 18px · 1.75
Caption and metadata text
Nunito · 400 · 14px · 1.5
In Context
Literary Grace
Where books meet browsers
Alegreya's calligraphic heritage makes every headline feel considered, while Nunito's rounded forms ensure digital comfort. A pairing for those who believe in the power of words.
“Words are, of course, the most powerful drug used by mankind.”
Rudyard Kipling
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=Alegreya:wght@400;500;600;700&family=Nunito:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Alegreya", serif;
font-size: 48px;
font-weight: 700;
line-height: 1.1;
}
h2 {
font-family: "Alegreya", serif;
font-size: 32px;
font-weight: 600;
line-height: 1.2;
}
h3 {
font-family: "Alegreya", serif;
font-size: 24px;
font-weight: 500;
line-height: 1.3;
}
.body-text {
font-family: "Alegreya", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.75;
}
.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: {
alegreya: [""Alegreya"", "serif"],
nunito: [""Nunito"", "sans-serif"],
},
fontSize: {
"h1": ["48px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["32px", { lineHeight: "1.2", fontWeight: "600" }],
"h3": ["24px", { lineHeight: "1.3", fontWeight: "500" }],
"body": ["18px", { lineHeight: "1.75", 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: Alegreya, 700 weight Used for H1–H3 Dynamic serif with calligraphic personality. Excellent for literary and editorial work. Body: Alegreya, 400 weight Used for paragraphs and UI Dynamic serif with calligraphic personality. Excellent for literary and editorial work. Tone: literary, warm, elegant Literary elegance meets friendly roundness. Alegreya's calligraphic grace paired with Nunito's soft terminals. Use this scale: H1 — 48px / 1.1 H2 — 32px / 1.2 H3 — 24px / 1.3 Body — 18px / 1.75 Caption — 14px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Alegreya — 700 — 48px — line-height 1.1 H2 — Alegreya — 600 — 32px — line-height 1.2 H3 — Alegreya — 500 — 24px — line-height 1.3 Body — Alegreya — 400 — 18px — line-height 1.75 Caption — Nunito — 400 — 14px — line-height 1.5 Headings should feel literary and warm. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.