Lexend + Atkinson Hyperlegible
Inclusive Excellence
Two fonts, one mission: readability
When reading fluency meets hyperlegibility, everyone benefits. This pairing prioritizes comprehension without compromising on visual appeal. Proof that accessibility and aesthetics align.
Double accessibility power. Lexend's reading fluency for headlines paired with Atkinson's hyperlegibility for body text.
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
Atkinson Hyperlegible
Designed for maximum legibility. Each letterform is uniquely distinct.
Designed by Braille Institute
Released 2020
Available weights: 400, 700
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.
Atkinson Hyperlegible · 400 · 17px · 1.75
Caption and metadata text
Atkinson Hyperlegible · 400 · 14px · 1.6
In Context
Inclusive Excellence
Two fonts, one mission: readability
When reading fluency meets hyperlegibility, everyone benefits. This pairing prioritizes comprehension without compromising on visual appeal. Proof that accessibility and aesthetics align.
“Good design enables, bad design disables.”
Paul Hiebert
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@500;600;700&family=Atkinson+Hyperlegible:wght@400&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: "Atkinson Hyperlegible", sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1.75;
}
.caption {
font-family: "Atkinson Hyperlegible", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
lexend: [""Lexend"", "sans-serif"],
atkinsonhyperlegible: [""Atkinson Hyperlegible"", "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": ["17px", { lineHeight: "1.75", fontWeight: "400" }],
"caption": ["14px", { lineHeight: "1.6", 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: Atkinson Hyperlegible, 400 weight Used for paragraphs and UI Designed for maximum legibility. Each letterform is uniquely distinct. Tone: accessible, readable, inclusive Double accessibility power. Lexend's reading fluency for headlines paired with Atkinson's hyperlegibility for body text. Use this scale: H1 — 44px / 1.15 H2 — 28px / 1.2 H3 — 22px / 1.3 Body — 17px / 1.75 Caption — 14px / 1.6
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 — Atkinson Hyperlegible — 400 — 17px — line-height 1.75 Caption — Atkinson Hyperlegible — 400 — 14px — line-height 1.6 Headings should feel accessible and readable. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.