Spectral + Rubik
Digital Refinement
Elegance engineered for screens
Google's Spectral was born digital, designed from the ground up for screen legibility without sacrificing the sophistication of traditional editorial serifs. Rubik adds warmth to every interaction.
Google's editorial serif meets friendly rounded sans. Spectral's screen-optimized elegance pairs naturally with Rubik's approachable geometry.
Typefaces Used
Spectral
Production Type's response to screen reading. Designed for Google Docs and web.
Designed by Production Type
Released 2017
Available weights: 200, 300, 400, 500, 600, 700, 800
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
Spectral · 700 · 46px · 1.1
Headline Two
Spectral · 600 · 30px · 1.2
Headline Three
Spectral · 500 · 22px · 1.3
Body text for paragraphs and long-form content.
Spectral · 400 · 17px · 1.75
Caption and metadata text
Rubik · 400 · 14px · 1.5
In Context
Digital Refinement
Elegance engineered for screens
Google's Spectral was born digital, designed from the ground up for screen legibility without sacrificing the sophistication of traditional editorial serifs. Rubik adds warmth to every interaction.
“Innovation distinguishes between a leader and a follower.”
Steve Jobs
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=Spectral:wght@400;500;600;700&family=Rubik:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Spectral", serif;
font-size: 46px;
font-weight: 700;
line-height: 1.1;
}
h2 {
font-family: "Spectral", serif;
font-size: 30px;
font-weight: 600;
line-height: 1.2;
}
h3 {
font-family: "Spectral", serif;
font-size: 22px;
font-weight: 500;
line-height: 1.3;
}
.body-text {
font-family: "Spectral", 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: {
spectral: [""Spectral"", "serif"],
rubik: [""Rubik"", "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: Spectral, 700 weight Used for H1–H3 Production Type's response to screen reading. Designed for Google Docs and web. Body: Spectral, 400 weight Used for paragraphs and UI Production Type's response to screen reading. Designed for Google Docs and web. Tone: modern, elegant, warm Google's editorial serif meets friendly rounded sans. Spectral's screen-optimized elegance pairs naturally with Rubik's approachable geometry. 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 — Spectral — 700 — 46px — line-height 1.1 H2 — Spectral — 600 — 30px — line-height 1.2 H3 — Spectral — 500 — 22px — line-height 1.3 Body — Spectral — 400 — 17px — line-height 1.75 Caption — Rubik — 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.