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 with WCAG-oriented checks and experimental APCA estimates, then export it to Tailwind, Figma, CSS, iOS, or 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.
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.
Review body size, spacing resilience, line length, hierarchy, and per-role contrast with links to the relevant W3C criteria.
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 readability considerations that sit outside a single pass/fail rule. The Studio brings these checks into one workspace, then exports the system to your stack.
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.
WCAG 1.4.4 does not set a minimum font size; it requires text to resize without loss of content or functionality. The Studio uses 16px as a practical starting point and flags smaller sizes for manual readability review.
WCAG 1.4.12 requires content to remain usable when users apply specified spacing values. Toggle the override to test those user styles for clipping, overlap, or lost content; the values are test conditions, not mandatory default styles.
WCAG 1.4.8 is a Level AAA criterion that limits blocks of text to no more than 80 characters or glyphs per line. The Studio also shows a narrower comfort band as design guidance and keeps it distinct from conformance.
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 normative WCAG 2.2 luminance ratio and an experimental APCA Lc estimate. APCA output is supplemental design guidance, not a conformance result.
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