Readable Fonts Tool

The Readable Fonts Tool replaces website fonts with specially designed, highly legible typefaces that are easier to read for users with dyslexia, visual impairments, or reading difficulties.

Features

• Dyslexia-Friendly Fonts: Specially designed typefaces that reduce letter confusion
• High Legibility: Fonts optimized for clear character distinction
• Universal Replacement: Replaces all website fonts consistently
• Performance Optimized: Efficiently loads and applies font changes

Settings

Font Option	Description	Best For
Default	Website's original fonts	Standard reading
Dyslexic	OpenDyslexic font designed for dyslexia	Dyslexic users, letter confusion
Readable	Metropolis clean, modern sans-serif	General readability, visual clarity
Bionic Reading	Fast Sans optimized for speed reading	Fast reading, focus enhancement

Usage

1. Click the Readable Fonts button in the accessibility toolbar
2. Navigate through font options using the stepper controls
3. All website text updates to use the selected font
4. Choose the font that provides the best reading experience

Accessibility Benefits

• Dyslexia Support: Reduces letter reversals and reading errors
• Visual Clarity: Improves character recognition and distinction
• Reading Speed: Can increase reading pace and comprehension
• Eye Strain Reduction: Easier-to-read fonts reduce visual fatigue
• Cognitive Load: Decreases mental effort required for text processing

Font Details

OpenDyslexic (Dyslexic)

• Purpose: Specifically designed for dyslexic readers
• Features: Weighted bottoms, unique character shapes, increased spacing
• Benefits: Reduces letter confusion, improves reading flow

Metropolis (Readable)

• Purpose: General-purpose readable font
• Features: Clean lines, consistent character width, high x-height
• Benefits: Enhanced legibility, modern appearance

Fast Sans (Bionic Reading)

• Purpose: Speed reading optimization
• Features: Strategic bold weighting, reading flow enhancement, normalized letter spacing
• Benefits: Faster reading, improved focus

Technical Implementation

Dynamically loads selected fonts and applies them using CSS font-family overrides. The tool ensures consistent typography while maintaining website layout and design integrity.

API Usage Example

The Readable Fonts tool can be programmatically controlled using the widget API. Here's how to enable and customize the tool:

// Basic activation (enables first available font - usually 'opendyslexic')
window.BrowseAidWidget.api.enableTool('readable-fonts');

// Enable with specific font
window.BrowseAidWidget.api.enableTool('readable-fonts', {
  level: 'opendyslexic'    // Use dyslexia-friendly font
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('readable-fonts', {
  enabled: true,
  level: 'metropolis'    // Switch to readable sans-serif
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('readable-fonts');
console.log('Readable Fonts is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('readable-fonts');
console.log('Current Readable Fonts settings:', settings);

// Disable the tool (revert to original fonts)
window.BrowseAidWidget.api.disableTool('readable-fonts');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'readable-fonts') {
    console.log('Readable Fonts settings changed:', settings);
  }
});

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
level	string	'default', 'opendyslexic', 'metropolis', 'fast'	'default'	Selected font option

Level Examples

• 'default' - Original website fonts
• 'opendyslexic' - OpenDyslexic dyslexia-friendly font
• 'metropolis' - Metropolis clean readable font
• 'fast' - Fast Sans speed reading optimized font

Usage Patterns

// User profile-based font selection
const fontProfiles = {
  'dyslexia': 'opendyslexic',
  'low-vision': 'metropolis',
  'speed-reader': 'fast',
  'general': 'metropolis'
};

function setFontForProfile(profile) {
  const level = fontProfiles[profile] || 'default';
  window.BrowseAidWidget.api.updateTool('readable-fonts', {
    enabled: level !== 'default',
    level: level
  });
}

// Reading context-based font selection
function setFontForContext(context) {
  let fontLevel;

  switch (context) {
    case 'studying':
      fontLevel = 'metropolis'; // Clear, focused reading
      break;
    case 'quick-scan':
      fontLevel = 'fast'; // Speed reading
      break;
    case 'accessibility':
      fontLevel = 'opendyslexic'; // Maximum accessibility
      break;
    default:
      fontLevel = 'default';
  }

  window.BrowseAidWidget.api.updateTool('readable-fonts', {
    enabled: fontLevel !== 'default',
    level: fontLevel
  });
}

// Font testing sequence
async function testFonts() {
  const fonts = ['opendyslexic', 'metropolis', 'fast'];

  for (const font of fonts) {
    window.BrowseAidWidget.api.updateTool('readable-fonts', {
      enabled: true,
      level: font
    });

    // Wait 3 seconds to test each font
    await new Promise(resolve => setTimeout(resolve, 3000));
  }
}