Cognitive Accessibility Font Guide

Use One Font Family

Stick to a single font family throughout your entire design. Mixing fonts forces users to process multiple visual systems simultaneously.

Consistent Text Styles for Same Functions

All h2 headings should look identical. All links should look identical. Consistency creates predictable patterns that reduce cognitive load.

/* Define consistent styles */
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

/* All h2s will look identical, creating predictable structure */

Predictable Patterns

Once users learn your typographic system (e.g., "large bold text is always a section heading"), they can navigate on autopilot. Breaking patterns forces conscious processing, which is cognitively expensive.

Document Pattern Libraries

Create and enforce a typography style guide that defines exactly which styles are used for each content type:

• Page titles: Arial 32px bold
• Section headings: Arial 24px bold
• Subsection headings: Arial 18px semi-bold
• Body text: Arial 16px regular
• Captions: Arial 14px regular, gray

Significant Size Differences

Headings should be meaningfully larger than body text. Subtle differences (16px body, 17px heading) don't register. Aim for at least 1.5× size increase between levels.

Weight Differentiation

Use bold (700) for headings, regular (400) for body. Avoid subtle weight differences like 500 vs 600—they don't create clear distinction.

Spatial Separation

Combine size and weight differences with generous spacing above headings to create unmistakable visual breaks:

h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 3rem; /* Large space above creates clear section break */
  margin-bottom: 1rem;
}

Semantic HTML for Structure

Always use proper heading tags (h1, h2, h3) with appropriate hierarchy. Don't skip levels (h1 to h3). Semantic structure aids comprehension even if visual styling is disabled. This also benefits screen reader users who may have cognitive disabilities.

Short Paragraphs

Limit paragraphs to 3-5 lines maximum. Long blocks of text trigger avoidance for ADHD users and overwhelm users with processing difficulties. Break content into digestible chunks.

Generous Line Height

Use line-height of 1.6-1.8 for body text. Tighter line height creates visual density that is cognitively overwhelming.

body {
  line-height: 1.6; /* 1.6× font size */
}

/* Even more generous for complex content */
.article-content {
  line-height: 1.8;
}

Bulleted Lists Instead of Prose

When possible, use bulleted lists instead of paragraph prose. Lists are scannable and reduce processing demands:

White Space as Strategic Element

Don't fear white space. Empty areas give cognitive rest, separate sections clearly, and make pages feel less intimidating. Dense layouts trigger overwhelm before users even start reading.

Plain Language

Use simple, common words. Avoid jargon, idioms, and complex vocabulary unless your audience is specialized. Complex language combined with unfamiliar fonts compounds cognitive difficulty.

Short Sentences

Aim for 15-20 words per sentence maximum. Long, complex sentences with multiple clauses require holding information in working memory while parsing structure—challenging for users with memory or processing difficulties.

Active Voice

Active voice is more direct and easier to process: "Click the button" vs "The button should be clicked." Passive voice adds cognitive overhead by requiring users to mentally reverse the sentence structure.

Descriptive Headings

Headings should clearly describe section content. For users with memory impairments, descriptive headings provide context reminders. Avoid clever or metaphorical headings that require interpretation.