New · v2.0
Type that everyone can read.
Build a typography system that meets WCAG 2.2, scales fluidly across viewports, and stays readable for people with low vision, dyslexia, and cognitive disabilities.
Loading...
Build a modular type scale that meets WCAG 2.2 + APCA, scales fluidly across viewports, and ships with one click to Tailwind, Figma, CSS, iOS, and Android.
Pairs with the Accessible Palette Studio → for a complete design-system-in-a-box.
Meets WCAG 2.2 AA minimums — 16px body, 1.5 line-height, 65ch max line.
Designed for screens. Versatile default for SaaS UI.
Designed for screens. Versatile default for SaaS UI.
Editorial serif with strong screen readability.
Programming-oriented monospace with great ligatures.
Build a typography system that meets WCAG 2.2, scales fluidly across viewports, and stays readable for people with low vision, dyslexia, and cognitive disabilities.
Eight ratios from subtle (1.067) to dramatic (1.618 golden), mapped to twelve semantic roles: display, h1–h6, lead, body, small, caption, code.
WCAG default, dyslexia-friendly (Atkinson Hyperlegible), low-vision, cognitive load (Lexend), editorial, and compact UI — each a one-click starting point.
Body size, line-height, line-length, heading hierarchy, paragraph spacing, and per-role contrast against your palette — all graded automatically with deep-links to W3C SC.
Paste any copy and get Flesch Reading Ease, Flesch-Kincaid Grade Level, average sentence length, and long-word ratio with targeted rewrites suggestions.
One toggle simulates the WCAG text-spacing overrides (1.5 line-height, 0.12em letter-spacing, 0.16em word-spacing, 2× paragraph spacing). Catch broken layouts before users do.
Tailwind v4 @theme, Tailwind v3 config, CSS variables + utility classes, W3C DTCG typography tokens, Tokens Studio JSON for Figma, Swift UIFont, Jetpack Compose TextStyle.
Color contrast gets all the attention because contrast checkers are easy to find. Typography accessibility is harder — it's spread across WCAG 1.4.4 (resize), 1.4.8 (visual presentation), 1.4.12 (text spacing), 1.4.3 (contrast), and a half-dozen cognitive guidelines from WCAG 2.2 and the upcoming WCAG 3. Most teams handle one or two and ship anyway. The Studio handles all of them in a single tool, then exports the whole system to your stack of choice.
Generate a complete type scale — 12 roles, fluid clamp() sizing, per-role line height and letter spacing, semantic tokens — ready for Tokens Studio or Style Dictionary.
Live WCAG 1.4.12 override toggle, per-role contrast against your palette, and Flesch-Kincaid grade level on real copy. Every report row links to the relevant W3C Success Criterion.
Export a working Tailwind v4 @theme block, a v3 config, CSS variables with utility classes, a Swift UIFont extension, and a Compose TextStyle object — all in seconds.
Body text minimum is 16px on desktop. The Studio passes anything at or above 16px (after fluid clamp at the smallest viewport), warns between 14–16px, and fails below 14px.
Body line-height must reach 1.5 — paragraph spacing at least 2× font size, letter-spacing 0.12em, word-spacing 0.16em. Toggle the override switch in any specimen to verify your layout survives the worst-case rendering.
Comfortable reading width is 45–80 characters per line. The Studio computes characters per line from your max-width and body font size and warns when the measure goes too narrow or too wide.
When you paste a palette primary, the report grades each text role's contrast against the derived background — body, small, caption, code, all H tags — using both the WCAG luminance ratio and the WCAG 3 APCA Lc model. Catches dark-mode body text that scores 4.7:1 but still fails APCA.
Flesch Reading Ease ≥ 60 and Flesch-Kincaid Grade Level ≤ 8 are the recommended targets for general audiences. The analyzer also flags long-sentence patterns and 3+ syllable word density.
Modular scales, WCAG 1.4.12, APCA, and design-token exports — answered.
Three things matter most: text remains readable when users resize up to 200% (1.4.4), text-spacing overrides (line-height ≥ 1.5, letter-spacing ≥ 0.12em, word-spacing ≥ 0.16em, paragraph-spacing ≥ 2× font size — WCAG 1.4.12) don't break the layout, and body text meets contrast minimums (4.5:1 for body, 3:1 for large text per 1.4.3). The Studio grades all of these automatically.
A modular scale multiplies a base font size by a ratio (1.125, 1.2, 1.25, 1.333, 1.5, 1.618) to derive every other size in the system. The result is a hierarchy that feels mathematically consistent — h1 to h6 read as steps along the same scale rather than arbitrary numbers. The Studio supports eight common ratios and shows the visual feel of each.
Each font size is wrapped in clamp(min, preferred, max) so it scales smoothly between a small viewport (360px) and a large one (1280px). Body text generally stays constant; headings shrink on small screens to avoid breaking the line at narrow widths. The math is a linear interpolation between viewport sizes — no media queries needed.
WCAG 2.2 default, Dyslexia-friendly (Atkinson Hyperlegible, looser tracking, ≤ 60ch), Low-vision (20px body, generous spacing), Cognitive load (Lexend, 1.75 line-height), Editorial / long-form (serif at 19px, ≤ 70ch), and Compact UI (14px dense layouts with extra grading rigor).
WCAG 1.4.12 requires that pages still work when users apply text-spacing overrides — line-height of 1.5× font size, paragraph spacing of 2× font size, letter-spacing of 0.12em, word-spacing of 0.16em. Toggle 'WCAG 1.4.12 override' in the Studio to simulate these overrides in any specimen and watch for clipped or overlapping text.
Yes — that's the point. Paste a palette's primary hex into the Studio (or share a URL between the two) and the typography report grades each text role's contrast against your real background and surface tokens, using both WCAG 2.2 ratios and APCA Lc.
Flesch Reading Ease (1948) scores text from 0 to ~120 based on average sentence length and average syllables per word. Scores ≥ 60 are recommended for general audiences. The Studio also reports Flesch-Kincaid Grade Level (US school grade) and flags overly long sentences or syllable-heavy word patterns.
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences