Raleway + Lato
Elegant Ambition
Sophistication meets scalability
Raleway's refined forms suggest a brand that knows its worth. Lato's humanist warmth keeps things grounded. Aspiration without pretension.
Elegant geometry duo. Raleway's refined letterforms pair naturally with Lato's warm humanist character.
Typefaces Used
Raleway
Elegant geometric sans originally for display. Distinctive in light weights.
Designed by Matt McInerney
Released 2010
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Lato
Warm humanist sans with semi-rounded details. One of the most popular fonts on the web.
Designed by Łukasz Dziedzic
Released 2010
Available weights: 100, 300, 400, 700, 900
Recommended Scale
Headline One
Raleway · 700 · 46px · 1.1
Headline Two
Raleway · 600 · 30px · 1.2
Headline Three
Raleway · 500 · 22px · 1.25
Body text for paragraphs and long-form content.
Lato · 400 · 16px · 1.75
Caption and metadata text
Lato · 400 · 14px · 1.5
In Context
Elegant Ambition
Sophistication meets scalability
Raleway's refined forms suggest a brand that knows its worth. Lato's humanist warmth keeps things grounded. Aspiration without pretension.
“Excellence is not a destination but a continuous journey.”
Brian Tracy
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=Raleway:wght@500;600;700&family=Lato:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Raleway", sans-serif;
font-size: 46px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
}
h2 {
font-family: "Raleway", sans-serif;
font-size: 30px;
font-weight: 600;
line-height: 1.2;
}
h3 {
font-family: "Raleway", sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.25;
}
.body-text {
font-family: "Lato", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.75;
}
.caption {
font-family: "Lato", 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: {
raleway: [""Raleway"", "sans-serif"],
lato: [""Lato"", "sans-serif"],
},
fontSize: {
"h1": ["46px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["30px", { lineHeight: "1.2", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "500" }],
"body": ["16px", { 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: Raleway, 700 weight Used for H1–H3 Elegant geometric sans originally for display. Distinctive in light weights. Body: Lato, 400 weight Used for paragraphs and UI Warm humanist sans with semi-rounded details. One of the most popular fonts on the web. Tone: elegant, modern, minimal Elegant geometry duo. Raleway's refined letterforms pair naturally with Lato's warm humanist character. Use this scale: H1 — 46px / 1.1 / -0.01em H2 — 30px / 1.2 H3 — 22px / 1.25 Body — 16px / 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 — Raleway — 700 — 46px — line-height 1.1 — letter-spacing -0.01em H2 — Raleway — 600 — 30px — line-height 1.2 H3 — Raleway — 500 — 22px — line-height 1.25 Body — Lato — 400 — 16px — line-height 1.75 Caption — Lato — 400 — 14px — line-height 1.5 Headings should feel elegant and modern. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.