Vollkorn + Rubik
German Precision
Engineering meets warmth
Vollkorn ('whole grain' in German) delivers rich, substantial typographic flavor. Rubik's friendly roundness softens the edges, creating approachable sophistication.
German precision meets friendly geometry. Vollkorn's rich character paired with Rubik's approachable roundness.
Typefaces Used
Vollkorn
Free serif font for daily bread use. Warm and readable for long-form content.
Designed by Friedrich Althausen
Released 2006
Available weights: 400, 500, 600, 700, 800, 900
Rubik
Rounded geometric sans with slightly rounded corners. Friendly and approachable.
Designed by Philipp Hubert & Sebastian Fischer
Released 2015
Available weights: 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Vollkorn · 700 · 44px · 1.15
Headline Two
Vollkorn · 600 · 28px · 1.25
Headline Three
Vollkorn · 600 · 22px · 1.3
Body text for paragraphs and long-form content.
Vollkorn · 400 · 17px · 1.75
Caption and metadata text
Rubik · 400 · 14px · 1.5
In Context
German Precision
Engineering meets warmth
Vollkorn ('whole grain' in German) delivers rich, substantial typographic flavor. Rubik's friendly roundness softens the edges, creating approachable sophistication.
“God is in the details.”
Ludwig Mies van der Rohe
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=Vollkorn:wght@400;600;700&family=Rubik:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Vollkorn", serif;
font-size: 44px;
font-weight: 700;
line-height: 1.15;
}
h2 {
font-family: "Vollkorn", serif;
font-size: 28px;
font-weight: 600;
line-height: 1.25;
}
h3 {
font-family: "Vollkorn", serif;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.body-text {
font-family: "Vollkorn", serif;
font-size: 17px;
font-weight: 400;
line-height: 1.75;
}
.caption {
font-family: "Rubik", 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: {
vollkorn: [""Vollkorn"", "serif"],
rubik: [""Rubik"", "sans-serif"],
},
fontSize: {
"h1": ["44px", { lineHeight: "1.15", fontWeight: "700" }],
"h2": ["28px", { lineHeight: "1.25", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.3", fontWeight: "600" }],
"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: Vollkorn, 700 weight Used for H1–H3 Free serif font for daily bread use. Warm and readable for long-form content. Body: Vollkorn, 400 weight Used for paragraphs and UI Free serif font for daily bread use. Warm and readable for long-form content. Tone: warm, elegant, readable German precision meets friendly geometry. Vollkorn's rich character paired with Rubik's approachable roundness. Use this scale: H1 — 44px / 1.15 H2 — 28px / 1.25 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 — Vollkorn — 700 — 44px — line-height 1.15 H2 — Vollkorn — 600 — 28px — line-height 1.25 H3 — Vollkorn — 600 — 22px — line-height 1.3 Body — Vollkorn — 400 — 17px — line-height 1.75 Caption — Rubik — 400 — 14px — line-height 1.5 Headings should feel warm and elegant. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.