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/).

  • 1
    !cixelsyD m'I dna ,ti gnidaer seye ym struh tI .tnof egnarts yrev eno si tahT – Reactgular Sep 21 '12 at 2:11
  • I added it to my wife's website with a small text link under the header (akamom.me). I'm sure this isn't the best way to do it, but the button does get some usage. – user18941 Sep 21 '12 at 12:17
  • Is this for a web site or a stand-alone application? – Monica Cellio Sep 21 '12 at 15:19
  • @MonicaCellio This would be for a web site and stand alone applications. – JeffH Sep 21 '12 at 17:31
  • Unless the website itself it about dyslexic people, this does nothing more then tell visitors that the owner of the website is dyslexic. Without knowing the reason behind creating the website this could be a good or bad thing. – Reactgular Sep 21 '12 at 20:18

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.

| improve this answer | |
  • Yeah, I think this a setting that the user-agent should provide, not the website author. And AFAIK all major browsers allow changing the font. – unor Sep 22 '12 at 14:01

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.

| improve this answer | |

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...):

Drawing of window

(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.

| improve this answer | |

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.

Sure the browser let's people switch fonts but I don't think that's a highly used feature. I use it but not until after many years of surfing the web. It would be cool if via javascript or something we could get a list of the fonts a user has available and then present them with possible fonts on a configuration page.

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.

| improve this answer | |
  • implementation is not a problem, simple JavaScript function to add a class to the page body or html tag. The CSS class will take care of the rest. – JeffH Jan 15 '13 at 22:54
  • @JeffH, sorry yeah. I was thinking of a javascript free implementation. – Jerry Saravia Jan 16 '13 at 16:16

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 RSS button in the top right; the 大 中 小 buttons just under it change the font size.

The Asahi newspaper uses a slightly different toggle hidden under an Aa button, but it's in the same place and has the same three options.

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.