Literata + Sora
Optical Intelligence
Variable fonts for variable screens
Literata adapts its optical size for perfect readability at any scale. A true variable font for the variable conditions of modern reading. Sora brings geometric modernity to the interface.
Google Books serif meets geometric precision. Literata's variable optical sizing paired with Sora's contemporary clarity.
Typefaces Used
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
Sora
Geometric sans with unique curves. Fresh and contemporary for tech brands.
Designed by Barnbrook
Released 2019
Available weights: 100, 200, 300, 400, 500, 600, 700, 800
Recommended Scale
Headline One
Literata · 700 · 46px · 1.1
Headline Two
Literata · 600 · 30px · 1.2
Headline Three
Literata · 500 · 22px · 1.3
Body text for paragraphs and long-form content.
Literata · 400 · 17px · 1.75
Caption and metadata text
Sora · 400 · 14px · 1.5
In Context
Optical Intelligence
Variable fonts for variable screens
Literata adapts its optical size for perfect readability at any scale. A true variable font for the variable conditions of modern reading. Sora brings geometric modernity to the interface.
“The only constant is change.”
Heraclitus
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=Literata:wght@400;500;600;700&family=Sora:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Literata", serif;
font-size: 46px;
font-weight: 700;
line-height: 1.1;
}
h2 {
font-family: "Literata", serif;
font-size: 30px;
font-weight: 600;
line-height: 1.2;
}
h3 {
font-family: "Literata", serif;
font-size: 22px;
font-weight: 500;
line-height: 1.3;
}
.body-text {
font-family: "Literata", serif;
font-size: 17px;
font-weight: 400;
line-height: 1.75;
}
.caption {
font-family: "Sora", 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: {
literata: [""Literata"", "serif"],
sora: [""Sora"", "sans-serif"],
},
fontSize: {
"h1": ["46px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["30px", { lineHeight: "1.2", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.3", fontWeight: "500" }],
"body": ["17px", { 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: Literata, 700 weight Used for H1–H3 Google's ebook-optimized serif. Variable with optical sizing for perfect reading. Body: Literata, 400 weight Used for paragraphs and UI Google's ebook-optimized serif. Variable with optical sizing for perfect reading. Tone: modern, elegant, readable Google Books serif meets geometric precision. Literata's variable optical sizing paired with Sora's contemporary clarity. Use this scale: H1 — 46px / 1.1 H2 — 30px / 1.2 H3 — 22px / 1.3 Body — 17px / 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 — Literata — 700 — 46px — line-height 1.1 H2 — Literata — 600 — 30px — line-height 1.2 H3 — Literata — 500 — 22px — line-height 1.3 Body — Literata — 400 — 17px — line-height 1.75 Caption — Sora — 400 — 14px — line-height 1.5 Headings should feel modern and elegant. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.