Project overview
Friendly Wiki is a custom-built web app that renders Wikipedia articles in a cleaner, more readable interface. The project is inspired by my girlfriend, who has dyslexia and often struggles with the dense typography and layout of traditional Wikipedia.
The goal is simple: make knowledge easier to read. Friendly Wiki adds a set of built-in accessibility features—dyslexia-friendly fonts, contrast modes, larger line spacing, simplified table styles, and an Apple-inspired interface that reduces visual noise. The project is currently in active development, with ongoing work to expand parsing, improve layout behavior, and refine the design system.
You can view the live version at:
friendlywiki.com
The problem
Wikipedia is one of the most important websites in the world, but its default design can be difficult for people with dyslexia or attention-related reading challenges. Articles are text-heavy, densely packed, and often visually overwhelming. While browser plugins exist, they are inconsistent and rarely optimize the entire reading experience.
I wanted a solution that:
- works on any Wikipedia article, automatically
- loads instantly without installing extensions
- lets users toggle accessibility settings inline
- creates a calm, readable environment
Process
1. Defining accessibility features
I focused on features that directly benefit dyslexic readers:
- Dyslexia-friendly font option
- Increased line height and paragraph spacing
- High-contrast and low-contrast reading modes
- Column width control to reduce line fatigue
- Cleaner table rendering for structured data
2. Parsing Wikipedia’s structure
Articles are retrieved through the Wikipedia API and then parsed into Friendly Wiki’s layout. This required building a custom renderer to handle headings, images, infoboxes, references, and tables while keeping the interface lightweight and responsive.
3. Designing the interface
The design draws inspiration from Apple’s editorial style—large type, generous spacing, and consistent rhythm. The UI intentionally stays out of the way so the content can breathe. I also built a design token system to ensure colors, spacing, and typography remain consistent across pages.
Work in progress
The current version supports article loading, table parsing, reading modes, and preliminary accessibility toggles. Upcoming improvements include:
- better infobox parsing
- a sidebar of recent articles
- saved preferences for readability settings
- a more advanced editor for tweaking text appearance
The project is going to be open source and will be evolving based on real reading behaviors.
What I am learning
Friendly Wiki has been a deep dive into practical accessibility—far beyond simply adding alt text or checking contrast ratios. Designing for dyslexic readers forced me to rethink every part of the reading experience: line length, rhythm, breathing room, typography shape, and even the emotional tone of the interface.
The project continues to teach me how design, readability, and compassion overlap.
Interested in the project?