Merriweather + Open Sans
Built to Last
When readability meets reliability
Some typefaces earn their place through quiet excellence. Merriweather's sturdy serifs have supported countless hours of reading, proving that the best typography is often the kind you never notice.
A proven workhorse pairing. Merriweather's generous x-height and sturdy serifs excel at body text, while Open Sans provides clean, neutral support.
Typefaces Used
Merriweather
Designed for optimal reading on screens. Warm, sturdy, with excellent legibility.
Designed by Sorkin Type
Released 2010
Available weights: 300, 400, 700, 900
Open Sans
Humanist sans-serif with neutral, friendly appearance. A web typography workhorse.
Designed by Steve Matteson
Released 2011
Available weights: 300, 400, 500, 600, 700, 800
Recommended Scale
Headline One
Merriweather · 700 · 42px · 1.15
Headline Two
Merriweather · 700 · 28px · 1.25
Headline Three
Merriweather · 700 · 22px · 1.3
Body text for paragraphs and long-form content.
Merriweather · 400 · 17px · 1.8
Caption and metadata text
Open Sans · 400 · 14px · 1.5
In Context
Built to Last
When readability meets reliability
Some typefaces earn their place through quiet excellence. Merriweather's sturdy serifs have supported countless hours of reading, proving that the best typography is often the kind you never notice.
“Good design is as little design as possible.”
Dieter Rams
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=Merriweather:wght@400;700&family=Open+Sans:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Merriweather", serif;
font-size: 42px;
font-weight: 700;
line-height: 1.15;
}
h2 {
font-family: "Merriweather", serif;
font-size: 28px;
font-weight: 700;
line-height: 1.25;
}
h3 {
font-family: "Merriweather", serif;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
.body-text {
font-family: "Merriweather", serif;
font-size: 17px;
font-weight: 400;
line-height: 1.8;
}
.caption {
font-family: "Open Sans", 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: {
merriweather: [""Merriweather"", "serif"],
opensans: [""Open Sans"", "sans-serif"],
},
fontSize: {
"h1": ["42px", { lineHeight: "1.15", fontWeight: "700" }],
"h2": ["28px", { lineHeight: "1.25", fontWeight: "700" }],
"h3": ["22px", { lineHeight: "1.3", fontWeight: "700" }],
"body": ["17px", { lineHeight: "1.8", 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: Merriweather, 700 weight Used for H1–H3 Designed for optimal reading on screens. Warm, sturdy, with excellent legibility. Body: Merriweather, 400 weight Used for paragraphs and UI Designed for optimal reading on screens. Warm, sturdy, with excellent legibility. Tone: warm, professional, readable A proven workhorse pairing. Merriweather's generous x-height and sturdy serifs excel at body text, while Open Sans provides clean, neutral support. Use this scale: H1 — 42px / 1.15 H2 — 28px / 1.25 H3 — 22px / 1.3 Body — 17px / 1.8 Caption — 14px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Merriweather — 700 — 42px — line-height 1.15 H2 — Merriweather — 700 — 28px — line-height 1.25 H3 — Merriweather — 700 — 22px — line-height 1.3 Body — Merriweather — 400 — 17px — line-height 1.8 Caption — Open Sans — 400 — 14px — line-height 1.5 Headings should feel warm and professional. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.