Accessible Typography

Did you know there’s a font designed just for accessibility? Meet Atkinson Hyperlegible, it was created by the Braille Institute of America to help people with low vision read more easily. It’s not a braille font (doesn’t include raised dots), but a print typeface. It even won the Fast Company Innovation Design Award in 2019! Molly Burke recently worked with her publisher to use the font for her memoir, Unseen. What makes it different? ⤵️ Hyperlegible exaggerates letter shapes so you can tell the difference between the letter “o” and the number zero (0), capital “i” vs. lowercase “l”, and the capital letter “b” vs. the number “8”. Other design features include: - Big open shapes - Clear spaces inside letters (known as open counters) - Distinct forms for commonly confused characters But who benefits? People who are blind or low vision, and people with dyslexia or visual processing differences. Clearer text equals easier reading! And the best part? It’s totally free 🎉 You can download it via Google Fonts or from the Braille Institute website. It also happens to be the same font this graphic post is written in. Accessibility isn’t always about doing more. It’s about doing things so that everyone benefits! This font is a small design choice with a big impact. Next time you design something: Try Atkinson Hyperlegible. Because readability is inclusion. Did you know about this font?  Share your thoughts or tag a designer friend in the comments! 👇 Image Description: Document with 9 slides. Each slide has a lime green border. The Blindish Latina logo with bold graphic black outline of an eye is at bottom of all slides. There is a white background behind all of the text on all slides. The text is in black and some emphasized phrases are purple. On the bottom of slides 1 and 7 is an image of Catarina, a light-skinned, Latiné woman with medium length wavy brown hair. She’s wearing a black jumpsuit with a V neck and her hands are on her hips. Slide 1 is the title slide that reads: “Did you know there’s a font designed just for accessibility?” On slide 1 there is clip art of a book with a red cover and a brain inside a light bulb. Slide 2 has clip art of an award ribbon. Slide 3 has a screenshot of advocate & content creator Molly Burke speaking at an event from one of her TikTok videos inside the outline of an iPhone. Slide 5 has a dark purple check mark inside a circle. Slide 6 has clip art of a computer outline in black with a wrench and gear in the center. All text on the slides is in the caption and alt text. #Disability #Accessibility #UniversalDesign

Typography is not an aesthetic choice. It is an accessibility filter. We obsess over inclusive language, yet we ignore inclusive design. We demand people bring their whole selves to work, then hand them documents their brains cannot process. If your strategy document is written in 10 point Times New Roman, fully justified, on a stark white background. You have statistically locked out a massive portion of your workforce before they read the first word. You are not sharing information. You are creating cognitive friction. Corporate documents often act as a dense, impenetrable canopy. Good typography is the trellis that actually supports the reader. Here are 9 ways to build an inclusive visual trellis for your team. 1/ The Serif Ban → The Rule: Default to sans serif fonts like Arial or Lexend. → The Impact: Removes decorative visual noise that exhausts dyslexic readers. 2/ Strict Left Alignment → Rule: Never use justified text. Always align flush left. → Impact: Creates a consistent visual anchor and prevents distracting rivers of white space. 3/ The Contrast Shift → Rule: Use dark grey text on an off white background instead of pure black on pure white. → Impact: Prevents the strobe effect and reduces sensory fatigue. 4/ The 1.5 Spacing → Rule: Set line spacing to 1.5. → Impact: Breaks up the dense wall of text to prevent accidental line skipping. 5/ The Emphasis Strategy → Rule: Use bold weight for emphasis. Avoid italics and underlines. → Impact: Italics deform letter shapes and underlines cut through descending letters, causing cognitive strain. 6/ The Format Reset → Rule: Always paste as plain text to prevent mixed font styles. → Impact: Stops the ransom note effect that distracts the nervous system. 7/ The Agency Protocol → Rule: Share editable documents instead of locked PDFs whenever possible. → Impact: Allows the user to change the font, size, and background to fit their own visual ecosystem. 8/ CamelCase Hashtags → Rule: Capitalize the first letter of each word in a hashtag. → Impact: Ensures screen reading software can actually pronounce the words correctly (#InclusiveDesign). 9/ Descriptive Hyperlinks → Rule: Write descriptive links instead of just saying click here. → Impact: Provides navigational safety and context before the user leaves the current environment. Typography is policy. If your team has to spend energy decoding your message, they have no energy left to understand it. There are so many more nuances we could add here. What is one typography barrier you wish would permanently disappear from corporate communications?

Research-backed accessible text checklist (beyond color & fonts) 1️⃣ Avoid ALL CAPS for long text Reading all caps slows people down by up to 10–20% because we recognize word shapes, not just letters. Uppercase removes those shapes, forcing letter-by-letter reading: https://lnkd.in/e7tCHxUD 👉 Keep all caps for short labels or acronyms only. 2️⃣ Keep an optimal line length Long lines make it hard for the eye to jump to the next line, while very short lines break reading rhythm. Based on classic readability research by Emil Ruder and later UX studies: https://lnkd.in/eJsTZT3w 👉 Aim for ~45–75 characters per line for comfortable reading. 3️⃣ Use generous line height Dense text increases cognitive load and reduces comprehension, especially for users with dyslexia. Recommended in Web Content Accessibility Guidelines (1.4.12 Text Spacing): https://lnkd.in/eam2Uqs5 👉 Use at least 1.4–1.6 line height for body text. 4️⃣ Don’t squeeze letters together Tight letter spacing makes words harder to parse, especially for users with visual or cognitive impairments. Supported by research from British Dyslexia Association: https://lnkd.in/eKc_2HPr 👉 Slightly increasing spacing (e.g., ~0.02–0.05em) can improve readability. 5️⃣ Avoid justified text blocks Perfectly aligned edges may look clean, but they create irregular spacing (“rivers of white”) that disrupt reading flow. 👉 Prefer left-aligned text for most content. 6️⃣ Give paragraphs room to breathe Large text blocks discourage reading and increase cognitive effort. 👉 Use spacing between paragraphs and keep them short (3–5 lines max). 7️⃣ Design for zoom and scaling Users should be able to zoom up to 200% without losing content or readability. 👉 Fixed heights and cramped layouts often break here. 8️⃣ Support scanning, not just reading Most users don’t read - they scan. Structured text helps them find what they need faster. Eye-tracking studies by Jakob Nielsen show “F-shaped” reading patterns: https://lnkd.in/etWrYsM7 👉 Use headings, lists, and clear content chunks. 9️⃣ Be careful with width and layout Very wide text blocks reduce focus, while overly narrow ones feel fragmented. 👉 Balance layout to guide the eye naturally across content. Small changes in spacing and structure can significantly improve comprehension, speed, and user comfort. What’s one text rule you wish more designers followed? #Accessibility #WebAccessibility #UX #InclusiveDesign #Readability

Want more people to read your content? Simple formatting tips can help: 1. Use sentence case or lowercase. (ALL CAPS is harder to read.) 2. Use underlines and italics very sparingly. Underlined and italic text can be harder to read, especially for folks who are dyslexic. 3. Avoid overly decorative fonts. Those are harder to read. 4. Left Align - for paragraphs of content, left alignment is recommended. Centered alignment of a paragraph is harder to read because your eye has to find the start of the new line each time. 5. Avoid Justified alignment- It creates inconsistent gaps (sometimes called “rivers”). You may think it looks “nice” but it is difficult to read. 6. Line spacing: Single spacing is more difficult to read. Spacing of 1.5 can help make your content more accessible. Create breathing room :) 7. Contrast is needed - do not put light text on light background (like white on yellow) or a dark text on dark background. (Like black on dark purple). WebAIM's Contrast Checker is a free tool to tell you if you have enough color contrast in your documents, decks and graphics to meet accessibility guidelines. Simple things make a difference. 💬 Did you learn anything new? 💬 What would you add? This is your Minds of All Kinds tip of the week. 🧠✅ #Accessibility #CognitiveAccessibility #Neuroinclusion #MindsOfAllKinds [Image Description: An educational graphic showing the contrast between text in all caps and text in lowercase: Red X symbol. TEXT IN ALL CAPS IS HARDER TO READ. ESPECIALLY WHEN IT’S MORE THAN ONE WORD. Green checkmark: Sentence case is easier to read. At the bottom center is the Minds of All Kinds logo next to a speech bubble icon labeled TIPS.]

The “accessible” font was the one they couldn’t read. I was in a conversation recently where a bubble-style font was flagged as inaccessible. The reasoning made sense. Then the people we claim to design for responded: - A neurodivergent person said bubble letters were easier to read, and the “accessible” fonts gave them headaches. - A dyslexic person said thin letterforms from the accessible font list blended and distorted, almost like an optical illusion. - Someone else said, “I can’t read the accessible ones. Only the bubble.” - Another asked: Which “accessible” font actually distinguishes between lowercase l, uppercase I, and the number 1? Arial. Helvetica. Calibri. Open Sans. Roboto. Fonts that recur in design systems, accessibility guidance, and handover decks. But for some people, those three characters are almost indistinguishable: l, I & 1 A font can look clean, pass brand review and appear in an accessibility checklist. And still fail the person sitting in front of the screen. Here’s what design teams can do: 1. Test the “Il1” string before choosing a font. - Type uppercase I, lowercase l, and the number 1 side by side: Il1. If they look identical, you have a legibility problem that your audit may not catch. 2. Don’t block text resizing. - Use scalable units where possible. Respect browser and device-level text preferences. Many people with disabilities and neurodivergent users resize text without assistive technology. 3. Build typography preferences into the product. - Font choice, size, line height, letter spacing, and background colour should be adjustable wherever possible. 4. One person’s accessible default is not everyone’s usable experience. - Include people with disabilities and neurodivergent users before the font is locked. Font decisions often happen in brand or design system sprints with no user research attached. That needs to change. Accessibility is a conversation And too often, we’ve been having that conversation without the people it’s supposed to serve. 👇🏽 Have you ever struggled to read something that was supposed to be “accessible”? What made it harder, or what actually worked better for you? 🔖 Save this for the next time you're looking at font options ♻️ Share it with your team ---- ✉️ Subscribe for more accessibility and design insights: https://lnkd.in/gZpAzWSu ---- Accessibility note: This infographic, titled The accessible font was the one they couldn't read has the same information as the post.

🍷 Free Accessible Web Fonts For UIs. Highly legible typefaces designed to improve comprehension for everyone, including people with ADHD and dyslexia ↓ Inclusive Sans, by Olivia King New open-source typeface designed for legibility. Supports 533 characters and 500 languages. Available as variable font. 🎁 Download → https://lnkd.in/ecvCEkrm 🍷 Font pairings → https://lnkd.in/e-RXuxTA 👍🏽 Best for: long reading text, UIs. Atkinson Hyperlegible, via Braille Institute Maximizes character distinction, helpful for people with visual impairments and dyslexia. 🎁 Download → https://lnkd.in/epPf6_ED 🍷 Font pairings → https://lnkd.in/erP3pGTM 👍🏽 Best for: long reading text, UIs. Radio Canada, by CBC/Radio-Canada Open source, extensively tested for legibility and digital accessibility, making it very effective when used in continuous text. Understated, variable fonts, comes in 10 styles. 🎁 Download → https://lnkd.in/ekxiEX7R 🍷 Font pairings: https://lnkd.in/eUGeHaWw 👍🏽 Best for: long reading text, UIs. Lexend Deca 7 font families, designed to improve reading proficiency for people with short-sightedness and dyslexia. Variable font, with a weight axis from Thin to Black. 🎁 Download → https://lnkd.in/eG2iRjRC 👍🏽 Best for: long reading text, UIs. AR One Sans Open source, designed for high readability in AR/VR environments and UI text. Useful for low and high resolution. Variable font, 8 styles. 🎁 Download → https://lnkd.in/eTGF2HHG 🍷 Font pairings → https://lnkd.in/ebkEXpXA 👍🏽 Best for: UIs (functional text) When we speak about accessible typography, we need to distinguish between legibility and readability. Often they are used interchangeably, but they mean slightly different things. Legibility is how easy it is to recognize individual letters and words in a typeface. It’s mostly about the design and shape of individual characters. Readability is how effortless it is for people to read and understand text for a long time. It refers to line length, font sizes, line height (leading) and clarity of writing. The wonderful typefaces above have been designed for people with short-sightedness, poor vision, ADHD and dyslexia. They vastly outperform Open Dyslexic, Dyslexie and Comic Sans, as discovered by Oliver Schöndorfer: https://lnkd.in/e4tdQKWD. Better legibility is better for everyone — and so are inclusive design and accessibility. And it’s fantastic to have options that have been heavily tested, and are available for everybody for free. A BIG warm thank you to wonderful type designers for their work. Designing a typeface can take years, and many of these typefaces support dozens of languages. Thank you for making digital products more inclusive, and easier to read and understand for everyone. ❤️ #ux #design

A11Y: Key Principles of Accessible Typography 1️⃣ Text Size: At Least 16px 2️⃣ Line Height: 1.5x the Font Size 3️⃣ Paragraph Spacing: 2x the Font Size 4️⃣ Letter Spacing: 0.12x the Font Size 5️⃣ Word Spacing: 0.16x the Font Size 6️⃣ Line Length: 60-80 Characters Per Line Ensuring Character Differentiation Certain characters can appear similar, making text harder to read. Use fonts that distinguish between: ✅ Uppercase "I" (I), lowercase "l" (l), and number "1" (1) to avoid confusion. ✅ Letters "C" & "O" should be clearly distinct to prevent misinterpretation. ✅ Letters "e", "s", and "o" should have unique shapes for better differentiation. Who Benefits from Accessible Typography? Accessible typography improves readability for everyone, but it is particularly beneficial for: 👓 Users with Low Vision 🎨 Users with Color Vision Deficiency 🧠 Users with Dyslexia 🌫️ Users with Low Contrast Sensitivity So keeping that in mind, let’s build a web that everyone can enjoy! 💡✨ #a11y #ui #ux