Looking to see if anyone has found any recommendations/best practices on allowing users to toggle different font-types. Particularly the ability to toggle between standard font-sets and one designed to increase the readability for Dyslexic users (http://dyslexicfonts.com/).
In theory, people can already do that via browser preferences and user style sheets. I'd like to believe that someone with bad enough dyslexia may have already done that, but it's certainly not necessarily an obvious feature.
'font preferences' have been around to various degrees on web sites. I think it's certainly something you can offer and with web fonts, is likely easier to implement than it was in the past. I probably wouldn't make it an up front feature, but perhaps a setting a user could choose on an 'accessibility preferences' page.
I don't see this as an option a lot on English websites, but it's very common for Japanese websites to have a toggle for the font size, with small-medium-large settings, and the style is very consistent. This is almost universally included as a set of three buttons on the top right of the page.
Fuji News uses the typical style - look for the
The Asahi newspaper uses a slightly different toggle hidden under an
It's also on the page for NHK (the national broadcasting corporation) and the official site of Tokyo.
While I know being in Japanese isn't particularly helpful, I assume the prevalence of the same exact pattern means it's doing something right.
How would you implement this? Would you @include a different font file on the web server when serving the CSS? I'm thinking more along the implementation side.
But then again, users that don't need the feature won't even look for it or might just ignore and and users that need a better font will already know how to switch the font via the browser.
Anybody that strongly benefits from Dyslexic fonts will know how to change it in the browser, because not one in the thousand sites allow you to interactively select fonts.
Therefore, all that you need to do is ensure that user-selected fonts don't break your site design. This is something that the user should be in charge of, just like window width and font size. You just have to not impede them.
If this is a website specifically designed with dyslexic people in mind, I would have a reasonably sized button at the top of the page, like this (not to scale...):
(I know its terrible, but I made it with paint :-) )
I think you should make it an image with text in the OpenDyslexic font. The reason for the image is because you won't want your visitors to have to download an extra font even though they don't need it. I don't know much about dyslexia, but try to make it very visible to those, so they don't struggle with reading the text when they didn't know you could toggle it.
When OpenDyslexic is off, it might say "Turn on dyslexic font" or something like that. Make sure the on/off state is persistent (using cookies or something). When it is on, the button should say something like "Turn off dyslexic font" in regular font.
If the website is not designed like that, then you can make the button smaller or make it a plain old link.
For an actual application/program, you should do a similar thing. If you are making this for dyslexic people, then make the button visible in the corner at all times when appropriate. If not, then put it in a settings menu.
After all, its up to you.