This is an awesome idea, and I love hacking for good. I’m not alone, e.g. Marco Arment has addedOpenDyslexic to Instapaper. We need more of this. Anyway, read on for Mark’s story and find the comments here or on his original post.

Note: WordPress strips out JavaScript by default, so if you want Mark’s bookmarklet, head over to his original post and drag the bookmarklet link to your Bookmarks bar to install it.

My wife and I recently found out that our 9 year old daughter has Dyslexia so lately I have done some research on solutions that could make her life easier. That is how I stumbled upon OpenDyslexic, “a new open sourced font created to increase readability for readers with dyslexia”. There is some science behind all this, which I will spare you the details of but when I showed it to my daughter, she said it was much easier to read for her, so I decided that all websites should use this font! Since it’s too much work to call all web designers and demand that the make the web more readable with this font, I came up with something more practical. I created a bookmarklet to apply the font, and a few other style changes that improve readability, to any website. It injects some CSS into the current webpage which then gets applied to the current web page, giving me exactly what I need. The CSS looks like this:

Pretty simple, it loads the Web Font from the defined URL into the browser (@font-face) and we then apply this to ALL elements on the page (font-family:opendyslexic !important;). Obviously this screws up some of the layout, so the bookmarklet is best applied on blog style websites or websites with lots of text, but it will work on any website. So go ahead, drag the bookmarklet to your bookmarks and apply it to your favorite website and let me know what you think.

Related

Post navigation

7 comments

Hi – this looks brilliant – thanks for the info. Would you mind explaining how I could go about setting up a bookmarklet please, as I know some people with dyslexia and I’d love to recommend this to them, but I’d need to give them some detailed instructions about how to set it up. I’m happy to write them myself, but I’m just not sure how to go from your post, to converting a web page to use the dyslexia font.