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.