Outfit
Typography Matters
The invisible art that shapes how we read
Great typography disappears into the reading experience, guiding the eye without calling attention to itself. The best font pairings create harmony between form and function.
Clean and confident. Outfit's geometric precision and excellent weight range make it a strong single-family choice for modern brands.
Typefaces Used
Outfit
Geometric sans designed for the future. Clean, versatile, and screen-optimized.
Designed by Rodrigo Fuenzalida
Released 2021
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Outfit · 700 · 52px · 1.05
Headline Two
Outfit · 600 · 34px · 1.15
Headline Three
Outfit · 600 · 22px · 1.25
Body text for paragraphs and long-form content.
Outfit · 400 · 16px · 1.65
Caption and metadata text
Outfit · 500 · 14px · 1.5
In Context
Typography Matters
The invisible art that shapes how we read
Great typography disappears into the reading experience, guiding the eye without calling attention to itself. The best font pairings create harmony between form and function.
“Typography is the voice of design.”
Unknown
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=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">h1 {
font-family: "Outfit", sans-serif;
font-size: 52px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
}
h2 {
font-family: "Outfit", sans-serif;
font-size: 34px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
}
h3 {
font-family: "Outfit", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "Outfit", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.65;
}
.caption {
font-family: "Outfit", sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
outfit: [""Outfit"", "sans-serif"],
},
fontSize: {
"h1": ["52px", { lineHeight: "1.05", fontWeight: "700" }],
"h2": ["34px", { lineHeight: "1.15", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "600" }],
"body": ["16px", { lineHeight: "1.65", fontWeight: "400" }],
"caption": ["14px", { lineHeight: "1.5", fontWeight: "500" }],
},
},
},
};
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: Outfit, 700 weight Used for H1–H3 Geometric sans designed for the future. Clean, versatile, and screen-optimized. Body: Outfit, 400 weight Used for paragraphs and UI Geometric sans designed for the future. Clean, versatile, and screen-optimized. Tone: modern, minimal, tech Clean and confident. Outfit's geometric precision and excellent weight range make it a strong single-family choice for modern brands. Use this scale: H1 — 52px / 1.05 / -0.02em H2 — 34px / 1.15 / -0.01em H3 — 22px / 1.25 Body — 16px / 1.65 Caption — 14px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Outfit — 700 — 52px — line-height 1.05 — letter-spacing -0.02em H2 — Outfit — 600 — 34px — line-height 1.15 — letter-spacing -0.01em H3 — Outfit — 600 — 22px — line-height 1.25 Body — Outfit — 400 — 16px — line-height 1.65 Caption — Outfit — 500 — 14px — line-height 1.5 Headings should feel modern and minimal. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.