✏️ Typography Principles

Typography plays a crucial role in supporting neurodivergent learners' reading on screens. The right typography choices can significantly improve readability and comprehension for users with dyslexia, ADHD, and other neurodivergent conditions.

The Right Approach

✅ Do This	❌ Not This
"The right typography can support neurodivergent learners' reading on screens."	"There are specific font shapes that make dyslexic readers read better!"

Design Guidelines

Principle	Description	Recommendation
Font Selection	Choose clear, readable fonts	Use sans-serif fonts like system-ui, Inter, or Open Sans
Font Size	Provide adequate base size	Minimum 16px (1rem), preferably 18px (1.125rem)
Line Height	Improve vertical rhythm	1.5 to 1.8 times the font size
Letter Spacing	Increase character spacing	0.02em to 0.05em
Word Spacing	Improve word recognition	0.1em to 0.2em
Contrast Ratio	Ensure readability	WCAG AA: 4.5:1 minimum
Text Alignment	Avoid "river effect"	Left-align text, avoid justified
Avoid All Caps	Maintain word shape	Use sentence case for long text

CSS Implementation

/* Base typography for neurodiverse users */
.neurodiverse-text {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 1.125rem; /* 18px */
  line-height: 1.75;
  letter-spacing: 0.025em;
  word-spacing: 0.1em;
  text-align: left;
}

/* High contrast text */
.high-contrast-text {
  color: #1a1a1a;
  background-color: #fefefe;
}

/* Dyslexia-friendly paragraph spacing */
.dyslexia-friendly p {
  margin-bottom: 1.5em;
}

/* Avoid justified text */
.readable-text {
  text-align: left;
  hyphens: none;
}

Tailwind CSS Classes

<div className="text-lg leading-relaxed tracking-wide text-left">
  <p className="text-neutral-800 bg-white">
    This text is optimized for neurodiverse readers with proper spacing and alignment.
  </p>
</div>

<div className="text-xl leading-loose tracking-wider">
  <p className="mb-6">
    Larger text with generous spacing helps users with visual processing difficulties.
  </p>
</div>

React Component

interface AccessibleTextProps {
  children: React.ReactNode;
  size?: "sm" | "base" | "lg" | "xl";
  as?: "p" | "span" | "div";
  highContrast?: boolean;
}

export function AccessibleText({
  children,
  size = "lg",
  as: Component = "p",
  highContrast = false,
}: AccessibleTextProps) {
  const sizeClasses = {
    sm: "text-base",
    base: "text-lg",
    lg: "text-xl",
    xl: "text-2xl",
  };

  return (
    <Component
      className={`
        ${sizeClasses[size]}
        leading-relaxed 
        tracking-wide 
        text-left
        ${highContrast ? "text-neutral-900 bg-white" : "text-neutral-800"}
      `}
    >
      {children}
    </Component>
  );
}

Font Recommendations

Recommended Fonts

System Fonts: system-ui, -apple-system, Segoe UI
Designed for Accessibility: Lexie Readable, OpenDyslexic

Fonts to Avoid

Decorative or script fonts
Fonts with similar character shapes (e.g., I, l, 1)
Condensed or compressed fonts
Fonts with poor x-height

Checklist

Base font size is at least 16px (preferably 18px)
Line height is between 1.5 and 1.8
Text is left-aligned (not justified)
Letter and word spacing are adequate
Contrast ratio meets WCAG AA (4.5:1)
Sans-serif fonts are used for body text
Long passages avoid all-caps
Paragraph spacing is generous