Figtree + Literata
Comfort Zone
Typography that feels like home
Figtree welcomes readers with warm, open forms while Literata, Google's ebook-optimized serif, makes long-form reading a pleasure. For platforms where people come to stay.
Warm contemporary meets bookish elegance. Figtree's friendly geometry paired with Literata's optimized reading experience.
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
Literata
Google's ebook-optimized serif. Variable with optical sizing for perfect reading.
Designed by TypeTogether
Released 2015
Available weights: 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Figtree · 700 · 46px · 1.1
Headline Two
Figtree · 600 · 30px · 1.15
Headline Three
Literata · 600 · 22px · 1.3
Body text for paragraphs and long-form content.
Literata · 400 · 17px · 1.8
Caption and metadata text
Figtree · 400 · 14px · 1.5
In Context
Comfort Zone
Typography that feels like home
Figtree welcomes readers with warm, open forms while Literata, Google's ebook-optimized serif, makes long-form reading a pleasure. For platforms where people come to stay.
“The details are not the details. They make the design.”
Charles Eames
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@400;600;700&family=Literata:wght@400;600&display=swap" rel="stylesheet">h1 {
font-family: "Figtree", sans-serif;
font-size: 46px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-family: "Figtree", sans-serif;
font-size: 30px;
font-weight: 600;
line-height: 1.15;
}
h3 {
font-family: "Literata", serif;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.body-text {
font-family: "Literata", serif;
font-size: 17px;
font-weight: 400;
line-height: 1.8;
}
.caption {
font-family: "Figtree", 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"],
literata: [""Literata"", "serif"],
},
fontSize: {
"h1": ["46px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["30px", { lineHeight: "1.15", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.3", fontWeight: "600" }],
"body": ["17px", { lineHeight: "1.8", 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: Literata, 400 weight Used for paragraphs and UI Google's ebook-optimized serif. Variable with optical sizing for perfect reading. Tone: warm, modern, readable Warm contemporary meets bookish elegance. Figtree's friendly geometry paired with Literata's optimized reading experience. Use this scale: H1 — 46px / 1.1 / -0.02em H2 — 30px / 1.15 H3 — 22px / 1.3 Body — 17px / 1.8 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 — 46px — line-height 1.1 — letter-spacing -0.02em H2 — Figtree — 600 — 30px — line-height 1.15 H3 — Literata — 600 — 22px — line-height 1.3 Body — Literata — 400 — 17px — line-height 1.8 Caption — Figtree — 400 — 14px — line-height 1.5 Headings should feel warm and modern. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.