Roboto
Universal Language
Google's gift to the digital world
Roboto balances mechanical geometry with humanist curves, creating a typeface that feels both efficient and approachable. It's Android's voice, and increasingly the web's.
Google's universal typeface. Roboto's mechanical skeleton with humanist curves creates the perfect balance of efficiency and warmth.
Typefaces Used
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
Roboto · 700 · 44px · 1.15
Headline Two
Roboto · 500 · 28px · 1.2
Headline Three
Roboto · 500 · 22px · 1.25
Body text for paragraphs and long-form content.
Roboto · 400 · 16px · 1.7
Caption and metadata text
Roboto · 400 · 14px · 1.5
In Context
Universal Language
Google's gift to the digital world
Roboto balances mechanical geometry with humanist curves, creating a typeface that feels both efficient and approachable. It's Android's voice, and increasingly the web's.
“Technology should be invisible.”
Satya Nadella
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=Roboto:wght@400;500;700&display=swap" rel="stylesheet">h1 {
font-family: "Roboto", sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.15;
}
h2 {
font-family: "Roboto", sans-serif;
font-size: 28px;
font-weight: 500;
line-height: 1.2;
}
h3 {
font-family: "Roboto", sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.25;
}
.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: {
roboto: [""Roboto"", "sans-serif"],
},
fontSize: {
"h1": ["44px", { lineHeight: "1.15", fontWeight: "700" }],
"h2": ["28px", { lineHeight: "1.2", fontWeight: "500" }],
"h3": ["22px", { lineHeight: "1.25", 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: Roboto, 700 weight Used for H1–H3 Google's signature typeface. Mechanical skeleton with humanist curves for excellent readability. Body: Roboto, 400 weight Used for paragraphs and UI Google's signature typeface. Mechanical skeleton with humanist curves for excellent readability. Tone: minimal, professional, modern Google's universal typeface. Roboto's mechanical skeleton with humanist curves creates the perfect balance of efficiency and warmth. Use this scale: H1 — 44px / 1.15 H2 — 28px / 1.2 H3 — 22px / 1.25 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 — Roboto — 700 — 44px — line-height 1.15 H2 — Roboto — 500 — 28px — line-height 1.2 H3 — Roboto — 500 — 22px — line-height 1.25 Body — Roboto — 400 — 16px — line-height 1.7 Caption — Roboto — 400 — 14px — line-height 1.5 Headings should feel minimal and professional. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.