Lexend
Read Better
Typography designed for comprehension
Lexend was created with reading fluency research in mind. Its carefully calibrated letterforms reduce visual stress, making reading easier for everyone. Not just those who struggle.
Optimized for reading fluency. Lexend's carefully calibrated letterforms reduce visual stress and improve comprehension.
Typefaces Used
Lexend
Designed for reading fluency. Variable width helps improve reading speed.
Designed by Bonnie Shaver-Troup
Released 2019
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Lexend · 700 · 44px · 1.15
Headline Two
Lexend · 600 · 28px · 1.2
Headline Three
Lexend · 500 · 22px · 1.3
Body text for paragraphs and long-form content.
Lexend · 400 · 16px · 1.7
Caption and metadata text
Lexend · 400 · 14px · 1.5
In Context
Read Better
Typography designed for comprehension
Lexend was created with reading fluency research in mind. Its carefully calibrated letterforms reduce visual stress, making reading easier for everyone. Not just those who struggle.
“Reading is to the mind what exercise is to the body.”
Joseph Addison
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=Lexend:wght@400;500;600;700&display=swap" rel="stylesheet">h1 {
font-family: "Lexend", sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.15;
}
h2 {
font-family: "Lexend", sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 1.2;
}
h3 {
font-family: "Lexend", sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.3;
}
.body-text {
font-family: "Lexend", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Lexend", 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: {
lexend: [""Lexend"", "sans-serif"],
},
fontSize: {
"h1": ["44px", { lineHeight: "1.15", fontWeight: "700" }],
"h2": ["28px", { 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: Lexend, 700 weight Used for H1–H3 Designed for reading fluency. Variable width helps improve reading speed. Body: Lexend, 400 weight Used for paragraphs and UI Designed for reading fluency. Variable width helps improve reading speed. Tone: accessible, modern, readable Optimized for reading fluency. Lexend's carefully calibrated letterforms reduce visual stress and improve comprehension. Use this scale: H1 — 44px / 1.15 H2 — 28px / 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 — Lexend — 700 — 44px — line-height 1.15 H2 — Lexend — 600 — 28px — line-height 1.2 H3 — Lexend — 500 — 22px — line-height 1.3 Body — Lexend — 400 — 16px — line-height 1.7 Caption — Lexend — 400 — 14px — line-height 1.5 Headings should feel accessible and modern. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.