Sora + Fira Code
Precision Engineering
Where geometry meets programming
Sora's mathematical precision creates clean interfaces while Fira Code's programming ligatures make code beautiful. A system designed for those who appreciate the art in engineering.
Tech-forward with character. Sora's geometric precision handles UI while Fira Code brings ligature-rich mono for technical content.
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
Recommended Scale
Headline One
Sora · 700 · 44px · 1.1
Headline Two
Sora · 600 · 28px · 1.2
Headline Three
Sora · 500 · 20px · 1.3
Body text for paragraphs and long-form content.
Sora · 400 · 16px · 1.7
Caption and metadata text
Fira Code · 400 · 13px · 1.5
In Context
Precision Engineering
Where geometry meets programming
Sora's mathematical precision creates clean interfaces while Fira Code's programming ligatures make code beautiful. A system designed for those who appreciate the art in engineering.
“Code is poetry.”
David Heinemeier Hansson
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;500;600;700&family=Fira+Code:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Sora", sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-family: "Sora", sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 1.2;
}
h3 {
font-family: "Sora", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.3;
}
.body-text {
font-family: "Sora", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Fira Code", monospace;
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"],
firacode: [""Fira Code"", "monospace"],
},
fontSize: {
"h1": ["44px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["28px", { lineHeight: "1.2", fontWeight: "600" }],
"h3": ["20px", { lineHeight: "1.3", fontWeight: "500" }],
"body": ["16px", { lineHeight: "1.7", 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: Sora, 400 weight Used for paragraphs and UI Geometric sans with unique curves. Fresh and contemporary for tech brands. Tone: tech, modern, cool Tech-forward with character. Sora's geometric precision handles UI while Fira Code brings ligature-rich mono for technical content. Use this scale: H1 — 44px / 1.1 / -0.02em H2 — 28px / 1.2 H3 — 20px / 1.3 Body — 16px / 1.7 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 — 44px — line-height 1.1 — letter-spacing -0.02em H2 — Sora — 600 — 28px — line-height 1.2 H3 — Sora — 500 — 20px — line-height 1.3 Body — Sora — 400 — 16px — line-height 1.7 Caption — Fira Code — 400 — 13px — line-height 1.5 Headings should feel tech and modern. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.