Sora + Fraunces
Playful Precision
When algorithms learn to dance
Sora's calculated curves meet Fraunces' delightful wonkiness. A conversation between control and chaos. For brands that take their craft seriously but never themselves.
Tech-forward geometry meets expressive serif. Sora's precision creates clean headlines while Fraunces adds personality and warmth to body text.
Typefaces Used
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
Fraunces
Expressive variable serif with 'wonky' axis. Perfect for brands that want personality.
Designed by Undercase Type
Released 2020
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Sora · 700 · 50px · 1.05
Headline Two
Sora · 600 · 32px · 1.15
Headline Three
Fraunces · 600 · 24px · 1.25
Body text for paragraphs and long-form content.
Fraunces · 400 · 17px · 1.75
Caption and metadata text
Sora · 400 · 13px · 1.5
In Context
Playful Precision
When algorithms learn to dance
Sora's calculated curves meet Fraunces' delightful wonkiness. A conversation between control and chaos. For brands that take their craft seriously but never themselves.
“The creation of something new is not accomplished by the intellect but by the play instinct.”
Carl Jung
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=Sora:wght@400;600;700&family=Fraunces:wght@400;600&display=swap" rel="stylesheet">h1 {
font-family: "Sora", sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
}
h2 {
font-family: "Sora", sans-serif;
font-size: 32px;
font-weight: 600;
line-height: 1.15;
}
h3 {
font-family: "Fraunces", serif;
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "Fraunces", serif;
font-size: 17px;
font-weight: 400;
line-height: 1.75;
}
.caption {
font-family: "Sora", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
sora: [""Sora"", "sans-serif"],
fraunces: [""Fraunces"", "serif"],
},
fontSize: {
"h1": ["50px", { lineHeight: "1.05", fontWeight: "700" }],
"h2": ["32px", { lineHeight: "1.15", fontWeight: "600" }],
"h3": ["24px", { lineHeight: "1.25", fontWeight: "600" }],
"body": ["17px", { lineHeight: "1.75", fontWeight: "400" }],
"caption": ["13px", { 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: Sora, 700 weight Used for H1–H3 Geometric sans with unique curves. Fresh and contemporary for tech brands. Body: Fraunces, 400 weight Used for paragraphs and UI Expressive variable serif with 'wonky' axis. Perfect for brands that want personality. Tone: playful, tech, warm Tech-forward geometry meets expressive serif. Sora's precision creates clean headlines while Fraunces adds personality and warmth to body text. Use this scale: H1 — 50px / 1.05 / -0.02em H2 — 32px / 1.15 H3 — 24px / 1.25 Body — 17px / 1.75 Caption — 13px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Sora — 700 — 50px — line-height 1.05 — letter-spacing -0.02em H2 — Sora — 600 — 32px — line-height 1.15 H3 — Fraunces — 600 — 24px — line-height 1.25 Body — Fraunces — 400 — 17px — line-height 1.75 Caption — Sora — 400 — 13px — line-height 1.5 Headings should feel playful and tech. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.