Khan Engineering

Khan Engineering

We're the engineers behind Khan Academy. We're building a free, world-class education for anyone, anywhere.

Subscribe

Latest posts

Dyslexic Friendly Font - Khan Academy's New Accessibility Feature

Dasani Madipalli on November 15

Using static analysis in Python, JavaScript and more to make your system safer

Kevin Dangoor on July 26

Kotlin on the server at Khan Academy

Colin Fuller on June 28

The Original Serverless Architecture is Still Here

Kevin Dangoor on May 31

What do software architects at Khan Academy do?

Kevin Dangoor on May 14

New data pipeline management platform at Khan Academy

Ragini Gupta on April 30

Untangling our Python Code

Carter J. Bastian on April 16

Slicker: A Tool for Moving Things in Python

Ben Kraft on April 2

The Great Python Refactor of 2017 And Also 2018

Craig Silverstein on March 19

Working Remotely

Scott Grant on Oct 2, 2017

Tips for giving your first code reviews

Hannah Blumberg on Sep 18, 2017

Let's Reduce! A Gentle Introduction to Javascript's Reduce Method

Josh Comeau on Jul 10, 2017

Creating Query Components with Apollo

Brian Genisio on Jun 12, 2017

Migrating to a Mobile Monorepo for React Native

Jared Forsyth on May 29, 2017

Memcached-Backed Content Infrastructure

Ben Kraft on May 15, 2017

Profiling App Engine Memcached

Ben Kraft on May 1, 2017

App Engine Flex Language Shootout

Amos Latteier on Apr 17, 2017

What's New in OSS at Khan Academy

Brian Genisio on Apr 3, 2017

Automating App Store Screenshots

Bryan Clark on Mar 27, 2017

It's Okay to Break Things: Reflections on Khan Academy's Healthy Hackathon

Kimerie Green on Mar 6, 2017

Interning at Khan Academy: from student to intern

Shadaj Laddad on Dec 12, 2016

Prototyping with Framer

Nick Breen on Oct 3, 2016

Evolving our content infrastructure

William Chargin on Sep 19, 2016

Building a Really, Really Small Android App

Charlie Marsh on Aug 22, 2016

A Case for Time Tracking: Data Driven Time-Management

Oliver Northwood on Aug 8, 2016

Time Management at Khan Academy

Several Authors on Jul 25, 2016

Hackathons Can Be Healthy

Tom Yedwab on Jul 11, 2016

Ensuring transaction-safety in Google App Engine

Craig Silverstein on Jun 27, 2016

The User Write Lock: an Alternative to Transactions for Google App Engine

Craig Silverstein on Jun 20, 2016

Khan Academy's Engineering Principles

Ben Kamens on Jun 6, 2016

Minimizing the length of regular expressions, in practice

Craig Silverstein on May 23, 2016

Introducing SwiftTweaks

Bryan Clark on May 9, 2016

The Autonomous Dumbledore

Evy Kassirer on Apr 25, 2016

Engineering career development at Khan Academy

Ben Eater on Apr 11, 2016

Inline CSS at Khan Academy: Aphrodite

Jamie Wong on Mar 29, 2016

Starting Android at Khan Academy

Ben Komalo on Feb 29, 2016

Automating Highly Similar Translations

Kevin Barabash on Feb 15, 2016

The weekly snippet-server: open-sourced

Craig Silverstein on Feb 1, 2016

Stories from our latest intern class

2015 Interns on Dec 21, 2015

Kanbanning the LearnStorm Dev Process

Kevin Dangoor on Dec 7, 2015

Forgo JS packaging? Not so fast

Craig Silverstein on Nov 23, 2015

Switching to Slack

Benjamin Pollack on Nov 9, 2015

Receiving feedback as an intern at Khan Academy

David Wang on Oct 26, 2015

Schrödinger's deploys no more: how we update translations

Chelsea Voss on Oct 12, 2015

i18nize-templates: Internationalization After the Fact

Craig Silverstein on Sep 28, 2015

Making thumbnails fast

William Chargin on Sep 14, 2015

Copy-pasting more than just text

Sam Lau on Aug 31, 2015

No cheating allowed!!

Phillip Lemons on Aug 17, 2015

Fun with slope fields, css and react

Marcos Ojeda on Aug 5, 2015

Khan Academy: a new employee's primer

Riley Shaw on Jul 20, 2015

How wooden puzzles can destroy dev teams

John Sullivan on Jul 6, 2015

Babel in Khan Academy's i18n Toolchain

Kevin Barabash on Jun 22, 2015

tota11y - an accessibility visualization toolkit

Jordan Scales on Jun 8, 2015

Meta

Dyslexic Friendly Font - Khan Academy's New Accessibility Feature

by Dasani Madipalli on November 15

Khan Academy's mission is to provide a free, world-class education for anyone, anywhere. This includes making our written content accessible for everyone. In order to make our content more accessible to our dyslexic users, we added a new accessibility user setting to make the website’s font more dyslexic-friendly! This change will allow users to change the website’s font from Lato, our standard body text font, to OpenDyslexic.

This setting is currently only available in the English and Spanish versions of the site. Additionally, the font will not override the one used in reading passages in the test preparation sections as the font there is attempting to mimic actual test prep environments. Finally, the font will also not override those used for mathematical equations since they have special characters that might not be present in OpenDyslexic.

If this sounds like something that may help you or someone you know to digest Khan Academy’s written content better, here’s how you can access it:

Enabling the Setting

  1. Click on your Settings tab:

Settings Page on Khan Academy

  1. Then go to Accessibility and check the box that says ‘Make Font Dyslexic Friendly’ and press ‘Save Changes’ :

Accessibility Settings Section in User Settings Page

  1. Your version of Khan Academy should now look something like this:

View of Settings Section after Dyslexic Friendly Font Setting is Turned On

How it Helps

Our goal with this setting is to allow users to change the font of the website to something that is might be more comfortable and easier to read. While the font does not “cure” dyslexia, it remedies some symptoms that some people with dyslexia experience. As described in the OpenDyslexic website, the font acts as a form of additional support, similar to how highlighting a textbook might help someone remember important facts of a passage.

Fonts intended to help dyslexic users take measures to make certain letters more distinguishable from one another. For instance, the letters in OpenDyslexic are weighted in certain areas to indicate direction. A capital W is more weighted on the bottom and a capital M is more weighted on the top. This helps a dyslexic user distinguish between an M and a W, which can sometimes be confusing due to their similar shape. Below, you can see an image that shows the contrast between how different letters that are often confusing for dyslexic users are displayed in different fonts.

Image Comparing different letters in different fonts

OpenDyslexic may not work for all people with dyslexia, but attempts to remedy some of its symptoms. You can find more information about the font and how it was created on their website.

The research around dyslexic-friendly fonts is still in the preliminary stages and there is no hard evidence to show that it significantly improves reading experiences for people with dyslexia.

Everyone is different, and certain fonts appear to work better for people with dyslexia than others. We feel that if there’s a chance that this feature will help some learners absorb information more effectively, we’re willing to give it a try.

The Making

Overriding our standard body text font with OpenDyslexic was a fairly straightforward approach. I first accessed downloaded the font files from their website. Once I added the font files to our GitHub repository, I created a css template for the font using @fontface. Here’s an example of what that might look like:

/* regular Open Dyslexic font */
@font-face {
   font-family: 'Open Dyslexic';
   src: url('/fonts/OpenDyslexic-Regular.otf')
        format('opentype');
   font-style: normal;
   font-weight: normal;
}

/* italic Open Dyslexic font */
@font-face {
   font-family: 'Open Dyslexic';
   src: url('/fonts/OpenDyslexic-Italic.otf')
        format('opentype');
   font-style: italic;
   font-weight: normal;
}

/* bold Open Dyslexic font */
@font-face {
   font-family: 'Open Dyslexic';
   src: url('/fonts/OpenDyslexic-Bold.otf')
        format('opentype');
   font-weight: bold;
   font-style: normal;
}

/* bold and italic Open Dyslexic */
@font-face {
   font-family: 'Open Dyslexic';
   src: url('/fonts/OpenDyslexic-BoldItalic.otf')
        format('opentype') ;
   font-weight: bold;
   font-style: italic;
}

At Khan Academy, we lazy load our fonts. In order to override our standard body text font, Lato, I just needed to see where it was used, check if the dyslexic-friendly font setting was turned on, and load OpenDyslexic instead.

To do that, I first set up our css styling for the default and upgraded fonts. The upgraded font will only be used if it has already been downloaded onto the user’s machine while the default font face allows the user to still see and read the page if the download is still happening:

body {
    font-family: 'Helvetica', 'Corbel', sans-serif;

    &.fonts-loaded-default {
        font-family: 'Lato', 'Helvetica', 'Corbel', sans-serif;
    }
    &.fonts-loaded-dyslexic {
        font-family: 'Open Dyslexic', 'Helvetica', 'Corbel', sans-serif;
    }
}

Then I overrode the body styling:

<script>
    const fontLoadedClassName = userProfile && userProfile.useDyslexicFriendlyFont ? fonts-loaded-dyslexic : fonts-loaded-default;
    const upgradedFontName = userProfile && userProfile.useDyslexicFriendlyFont ? Open Dyslexic : Lato;

    if (document.cookie[fontLoadedClassName]) {
        document.body.className += fontLoadedClassName;
    } else {
        const font = newFontFaceObserver(upgradedFontName);
        font.load().then(() => {
            document.body.className += fontLoadedClassName;
            document.cookie = `${fontLoadedClassName} = true`;
        })
    }
</script>

Also please note that this not the actual code I wrote, but an approximation of the logic we used. Hope this helps you to add a similar feature to your own websites and applications

Help Make Khan Academy More Accessible

A lot of our accessibility features have been motivated by user feedback and requests. We really do value user input and would love to hear what you think will help make Khan Academy easier to access and use. Do you have any other suggestions for how we can make Khan Academy more accessible to everyone? Please let us know.