DEV Community

Cover image for Have Dyslexia? Make Coding Easier In Visual Studio Code
Carl Saunders
Carl Saunders

Posted on • Edited on

Have Dyslexia? Make Coding Easier In Visual Studio Code

Use OpenDyslexic Font With Visual Studio Code

If, like me, you suffer from dyslexia and sometimes find it hard to read ๐Ÿ“•๐Ÿ‘จโ€๐Ÿ’ปโ“ your code using the standard monospaced font used by your IDE, then the below steps might be of interest to you.

What Is The OpenDyslexic Font?

Wikipedia provides some background to the font.

"OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia, though its benefits have been questioned in scientific studies. The typeface was created by Abelardo Gonzalez, who released it through an open-source license. The design is based on that of DejaVu Sans, also an open-source font."

Download OpenDyslexic Font

Firstly, you can download the awesome free OpenDyslexic font if you haven't already from the following link:-

https://www.opendyslexic.org/

Once you have the OpenDyslexic Font product, then download the OpenDyslexic Mono zip file (monospaced fonts work best when coding).

Note: A monospaced font's letters and characters each occupy the same amount of horizontal space. These are often referred to as fixed-width fonts.

Install OpenDyslexic Mono Font

Note: These steps document how to install the font via Windows 10. Feel free to share in the comment section details on how to install on other operating systems.

Before installing the OpenDyslexic Mono font you'll need to unzip it. Once unzipped, double click the OpenDyslexicMono-Regular.otf file and this will open the font in Windows Font Viewer. Now click the Install button.

OpenDyslexic Mono font in Windows Font Viewer

Setup Visual Studio Code

Open Visual Studio Code and from the File menu choose Preferences, Settings or use the keyboard shortcut Ctrl + , (Cmd + , on Mac). These font changes can be made for the user or workspace depending on your preference. At this point you'll need to make sure the correct tab is selected.

Type font for the search term and this will now filter the settings to only show those that concern fonts. Find the "Editor: Font Family" (this should be the first setting displayed). In the "Font Family" input box add OpenDyslexicMono to the beginning of the text.



OpenDyslexicMono, Consolas, 'Courier New', monospace


Enter fullscreen mode Exit fullscreen mode

Note: Changes are automatically saved.

Visual Studio Code is making the following change to the settings file behind the scenes.



{
    ...
    "editor.fontFamily": "OpenDyslexicMono, Consolas, 'Courier New', monospace"
}


Enter fullscreen mode Exit fullscreen mode

Below is an example of what to expect when a file is opened using the OpenDyslexic font.

IDE Using OpenDyslexic Font

I've found the OpenDyslexic Mono font helpful and I hope it makes a difference for other developers too. It would be good to hear your experiences of using it and whether it makes life any easier via the comments.

Enjoy and happy coding!!!๐Ÿ’ป

Top comments (16)

Collapse
 
frontear profile image
Ali Rizvi

It should be noted not all dyslexic people find this font comfortable. A couple of close friends, who are also dyslexic claim this font makes it feel worse or harder to read with.

Effectively, your mileage may vary

Collapse
 
rpoirier profile image
Reese Poirier

I've had similar experiences with "colorblind friendly" editor color themes. The ones I've tried are all worse for me than most standard themes.

Unfortunately accessibility isn't often one size fits all.

Collapse
 
deadlybyte profile image
Carl Saunders

Unfortunately there's no one size fits all solution, but it can help some.

Collapse
 
jordonr profile image
Jordon Replogle

I'm dyslexic, and I've tried using this font and I just can't get used to it.

Collapse
 
mobilerez profile image
Mitch Muenster • Edited

intresting post. As a dyslexic person my self I prefer to use the Fluent Calibri font. It is not a one size fits all solution but it also helps with presenting for big rooms and showing off code. I have concerns with the way this font makes some lines thicker and thinner, it could potentially cause issues. microsoft.com/en-us/download/detai... is the link to get the font for windows, unix/Linux an dnd mobile phone.

Glad you found something that works for you.

Collapse
 
halitfirat profile image
halitfirat • Edited

That was helpful! There is something to Fluent Calibri according to a study:

...
In conclusion, we demonstrated that low-progress readers are 7% more
efficient in reading text in Dyslexie compared with Arial, matched on letter display
size. However, when the spacing settings for Arial are matched to Dyslexie, the
advantage disappears. Therefore, the benefit of Dyslexie seems to stem fully from
its specific spacing settings. In contrast, the fontโ€™s hallmark letter shapes, which are
intended to be more distinct than those in standard fonts, do not provide a benefit.
In fact, our analyses show that compared with Arial, the inter-letter distinctiveness
of Dyslexie is actually lower. The practical implication is that to directly increase
the average reading efficiency of low-progress readers one can simply change
the fontโ€™s spacing settings. There is no need to alter the shape of the letters.
...

But for me the letter spacing in Fluent Calibri was a bit too much. So i had to decrease it a bit.

Collapse
 
mobilerez profile image
Mitch Muenster

Indeed, that is always the challenge for designers and developers when it comes to things like Dyslexia which can show many different ways, there is no one magic bullet. I know a lot of people who have great success with the fonts listed in this article. There are always more factors that contribute to readability, comprehension and processing of text then besides the font its self such as colors, color contrast between font and background, spacing between font and other design elements, etc. and this is not even taking into personal preferences when reading fonts or how a platform may render a font and what that platform allows for or constricts from the fonts file to display on screen. for example I have had some IDE's not respect the spacing set about in the font file, and it causes it to display improper or without any of the expected spacing and seemed to force its own spacing intent on the users font regardless of what was chosen much less with the respective OS chooses to do.

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€

I use a really high contrast theme based on Adobe brackets dark. I will take a look at this font. Might work for me.

Collapse
 
deadlybyte profile image
Carl Saunders

I'm currently using the Default Dark+ theme, but might have a look at the Adobe Brackets dark theme.

marketplace.visualstudio.com/items...

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€

Does anyone work with a screen reader. Sometimes I leave it open and code with it, that helps me on bad days.

Collapse
 
link2twenty profile image
Andrew Bone

That's how I read books generally, I buy the audiobook too and listen to it, while following along on paper, if I'm really struggling.

Collapse
 
dlharp2 profile image
David L. Harper

I'm not really a software developer, but I signed up to say I really dig the font! The font has a ghost hunter aesthetic to it.

Collapse
 
zikkurat10 profile image
zikkurat10

Thank You, deadlybyte, for your passion and help to solve that problem easy and quickly. Wish your personal grow and luck in life. Thank you very much!

Collapse
 
kayis profile image
K • Edited

I#m not dyslexic, but I like OpenDyslexic it feels more comfortable to read, use it on my Kindle all the time.

Nice to see that there is a monospaced version, will try it on VSCode :)

Collapse
 
deadlybyte profile image
Carl Saunders

I'm currently using it on the Kindle as well, definitely makes it easier and I'm less likely to lose concentration.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.