Oswald + Roboto
Condensed Power
More impact, less space
Oswald packs presence into narrow forms, perfect for headlines that need to fit without compromise. Roboto expands to fill the body with reliable readability.
Condensed power meets universal readability. Oswald's narrow forms pack impact into headlines while Roboto handles body text efficiently.
Typefaces Used
Oswald
Reworked gothic style. Condensed and impactful for headlines.
Designed by Vernon Adams
Released 2011
Available weights: 200, 300, 400, 500, 600, 700
Roboto
Google's signature typeface. Mechanical skeleton with humanist curves for excellent readability.
Designed by Christian Robertson
Released 2011
Available weights: 100, 300, 400, 500, 700, 900
Recommended Scale
Headline One
Oswald · 700 · 56px · 1.05
Headline Two
Oswald · 600 · 36px · 1.1
Headline Three
Oswald · 500 · 24px · 1.2
Body text for paragraphs and long-form content.
Roboto · 400 · 16px · 1.7
Caption and metadata text
Roboto · 400 · 14px · 1.5
In Context
Condensed Power
More impact, less space
Oswald packs presence into narrow forms, perfect for headlines that need to fit without compromise. Roboto expands to fill the body with reliable readability.
“Brevity is the soul of wit.”
William Shakespeare
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=Oswald:wght@500;600;700&family=Roboto:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Oswald", sans-serif;
font-size: 56px;
font-weight: 700;
line-height: 1.05;
}
h2 {
font-family: "Oswald", sans-serif;
font-size: 36px;
font-weight: 600;
line-height: 1.1;
}
h3 {
font-family: "Oswald", sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 1.2;
}
.body-text {
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Roboto", 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: {
oswald: [""Oswald"", "sans-serif"],
roboto: [""Roboto"", "sans-serif"],
},
fontSize: {
"h1": ["56px", { lineHeight: "1.05", fontWeight: "700" }],
"h2": ["36px", { lineHeight: "1.1", fontWeight: "600" }],
"h3": ["24px", { lineHeight: "1.2", fontWeight: "500" }],
"body": ["16px", { lineHeight: "1.7", 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: Oswald, 700 weight Used for H1–H3 Reworked gothic style. Condensed and impactful for headlines. Body: Roboto, 400 weight Used for paragraphs and UI Google's signature typeface. Mechanical skeleton with humanist curves for excellent readability. Tone: bold, modern, condensed Condensed power meets universal readability. Oswald's narrow forms pack impact into headlines while Roboto handles body text efficiently. Use this scale: H1 — 56px / 1.05 H2 — 36px / 1.1 H3 — 24px / 1.2 Body — 16px / 1.7 Caption — 14px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Oswald — 700 — 56px — line-height 1.05 H2 — Oswald — 600 — 36px — line-height 1.1 H3 — Oswald — 500 — 24px — line-height 1.2 Body — Roboto — 400 — 16px — line-height 1.7 Caption — Roboto — 400 — 14px — line-height 1.5 Headings should feel bold and modern. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.