Gelasio + Open Sans
Familiar Excellence
The Georgia you wish you had
Gelasio channels the comfortable warmth of Georgia with improved metrics for the web. Open Sans provides the neutral clarity that lets the content shine.
Georgia alternative meets universal neutrality. Gelasio's familiar warmth paired with Open Sans's reliable clarity.
Typefaces Used
Gelasio
Georgia metric-compatible serif. Familiar proportions with fresh details.
Designed by Eben Sorkin
Released 2019
Available weights: 400, 500, 600, 700
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
Gelasio · 700 · 44px · 1.15
Headline Two
Gelasio · 600 · 28px · 1.25
Headline Three
Gelasio · 600 · 22px · 1.3
Body text for paragraphs and long-form content.
Gelasio · 400 · 17px · 1.75
Caption and metadata text
Open Sans · 400 · 14px · 1.5
In Context
Familiar Excellence
The Georgia you wish you had
Gelasio channels the comfortable warmth of Georgia with improved metrics for the web. Open Sans provides the neutral clarity that lets the content shine.
“Content is king.”
Bill Gates
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=Gelasio:wght@400;600;700&family=Open+Sans:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Gelasio", serif;
font-size: 44px;
font-weight: 700;
line-height: 1.15;
}
h2 {
font-family: "Gelasio", serif;
font-size: 28px;
font-weight: 600;
line-height: 1.25;
}
h3 {
font-family: "Gelasio", serif;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.body-text {
font-family: "Gelasio", serif;
font-size: 17px;
font-weight: 400;
line-height: 1.75;
}
.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: {
gelasio: [""Gelasio"", "serif"],
opensans: [""Open Sans"", "sans-serif"],
},
fontSize: {
"h1": ["44px", { lineHeight: "1.15", fontWeight: "700" }],
"h2": ["28px", { lineHeight: "1.25", fontWeight: "600" }],
"h3": ["22px", { lineHeight: "1.3", fontWeight: "600" }],
"body": ["17px", { 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: Gelasio, 700 weight Used for H1–H3 Georgia metric-compatible serif. Familiar proportions with fresh details. Body: Gelasio, 400 weight Used for paragraphs and UI Georgia metric-compatible serif. Familiar proportions with fresh details. Tone: classic, professional, readable Georgia alternative meets universal neutrality. Gelasio's familiar warmth paired with Open Sans's reliable clarity. Use this scale: H1 — 44px / 1.15 H2 — 28px / 1.25 H3 — 22px / 1.3 Body — 17px / 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 — Gelasio — 700 — 44px — line-height 1.15 H2 — Gelasio — 600 — 28px — line-height 1.25 H3 — Gelasio — 600 — 22px — line-height 1.3 Body — Gelasio — 400 — 17px — line-height 1.75 Caption — Open Sans — 400 — 14px — line-height 1.5 Headings should feel classic and professional. Body text should feel readable and refined. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.