Montserrat + Karla
Urban Energy
Street-smart sophistication
Montserrat channels the spirit of Buenos Aires signage. Bold, confident, unmistakable. Karla adds a touch of quirky charm to keep things interesting.
Urban geometry meets quirky warmth. Montserrat's confidence in headlines balanced by Karla's friendly character in body text.
Typefaces Used
Montserrat
Urban geometric sans inspired by Buenos Aires signage. Bold and versatile.
Designed by Julieta Ulanovsky
Released 2011
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Karla
Grotesque sans with quirky details. Clean and functional with personality.
Designed by Jonny Pinhorn
Released 2012
Available weights: 200, 300, 400, 500, 600, 700, 800
Recommended Scale
Headline One
Montserrat · 700 · 48px · 1.1
Headline Two
Montserrat · 600 · 32px · 1.15
Headline Three
Montserrat · 600 · 22px · 1.25
Body text for paragraphs and long-form content.
Karla · 400 · 16px · 1.7
Caption and metadata text
Karla · 400 · 14px · 1.5
In Context
Urban Energy
Street-smart sophistication
Montserrat channels the spirit of Buenos Aires signage. Bold, confident, unmistakable. Karla adds a touch of quirky charm to keep things interesting.
“The city is a jungle, but the jungle is full of opportunities.”
Anonymous
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=Montserrat:wght@600;700&family=Karla:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Montserrat", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-family: "Montserrat", sans-serif;
font-size: 32px;
font-weight: 600;
line-height: 1.15;
}
h3 {
font-family: "Montserrat", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "Karla", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Karla", 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: {
montserrat: [""Montserrat"", "sans-serif"],
karla: [""Karla"", "sans-serif"],
},
fontSize: {
"h1": ["48px", { lineHeight: "1.1", fontWeight: "700" }],
"h2": ["32px", { lineHeight: "1.15", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "600" }],
"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: Montserrat, 700 weight Used for H1–H3 Urban geometric sans inspired by Buenos Aires signage. Bold and versatile. Body: Karla, 400 weight Used for paragraphs and UI Grotesque sans with quirky details. Clean and functional with personality. Tone: modern, bold, professional Urban geometry meets quirky warmth. Montserrat's confidence in headlines balanced by Karla's friendly character in body text. Use this scale: H1 — 48px / 1.1 / -0.02em H2 — 32px / 1.15 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 — Montserrat — 700 — 48px — line-height 1.1 — letter-spacing -0.02em H2 — Montserrat — 600 — 32px — line-height 1.15 H3 — Montserrat — 600 — 22px — line-height 1.25 Body — Karla — 400 — 16px — line-height 1.7 Caption — Karla — 400 — 14px — line-height 1.5 Headings should feel modern and bold. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.