Bitter + Poppins
Substantial Style
Slab serif meets geometric precision
Bitter's sturdy serifs convey substance and reliability, while Poppins' circular forms add contemporary appeal. A pairing that says 'trust us' in a friendly voice.
Slab meets geometric. Bitter's sturdy warmth for headlines paired with Poppins' circular precision for body text.
Typefaces Used
Bitter
Slab serif designed for comfortable reading on screen. Sturdy and reliable.
Designed by Sol Matas
Released 2011
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Poppins
Geometric sans with perfect circles. Popular for tech and startup brands.
Designed by Indian Type Foundry
Released 2014
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Bitter · 700 · 46px · 1.1
Headline Two
Bitter · 600 · 30px · 1.2
Headline Three
Bitter · 500 · 22px · 1.3
Body text for paragraphs and long-form content.
Poppins · 400 · 16px · 1.7
Caption and metadata text
Poppins · 400 · 14px · 1.5
In Context
Substantial Style
Slab serif meets geometric precision
Bitter's sturdy serifs convey substance and reliability, while Poppins' circular forms add contemporary appeal. A pairing that says 'trust us' in a friendly voice.
“Quality is remembered long after price is forgotten.”
Gucci Family Motto
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=Bitter:wght@500;600;700&family=Poppins:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Bitter", sans-serif;
font-size: 46px;
font-weight: 700;
line-height: 1.1;
}
h2 {
font-family: "Bitter", sans-serif;
font-size: 30px;
font-weight: 600;
line-height: 1.2;
}
h3 {
font-family: "Bitter", sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.3;
}
.body-text {
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Poppins", 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: {
bitter: [""Bitter"", "sans-serif"],
poppins: [""Poppins"", "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": ["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: Bitter, 700 weight Used for H1–H3 Slab serif designed for comfortable reading on screen. Sturdy and reliable. Body: Poppins, 400 weight Used for paragraphs and UI Geometric sans with perfect circles. Popular for tech and startup brands. Tone: warm, modern, professional Slab meets geometric. Bitter's sturdy warmth for headlines paired with Poppins' circular precision for body text. Use this scale: H1 — 46px / 1.1 H2 — 30px / 1.2 H3 — 22px / 1.3 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 — Bitter — 700 — 46px — line-height 1.1 H2 — Bitter — 600 — 30px — line-height 1.2 H3 — Bitter — 500 — 22px — line-height 1.3 Body — Poppins — 400 — 16px — line-height 1.7 Caption — Poppins — 400 — 14px — line-height 1.5 Headings should feel warm and modern. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.