Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Adding A Dyslexia-Friendly Mode To A Website

• EDIT: it is possible there is some misinformation in the linked article. Please see Gareth Ford Williams’ highly critical rebuttal of this article, published in dai11y 21/12/2021. My original coverage of the article is below, and has not been edited.
• —
• Smashing Magazine article by John C Barstow. I thought this was going to be one of those “choose a dyslexic-friendly font” type article, but it covers a lot more than that!
• According to John, “research shows that standard fonts like Helvetica and Times New Roman are just as readable as purpose-built fonts like Dyslexie or Open Dyslexic”. He goes on to clarify that the most important factor is the spacing between letters and words. The reason fonts like Comic Sans are so popular with dyslexic readers is the wider spacing found in that font.
• We can increase the letter spacing of our chosen font using the ch unit, which is based on the size of the 0 glyph – often a good approximation of the average character width. John comes up with this CSS: .dyslexia-mode { letter-spacing: 0.35ch; word-spacing: 1.225ch; }, which gives a 3.5x letter spacing.
• Ligatures are when multiple characters are merged into a single glyph; you’ll often see this when “f” and “i” are rendered next to one another, forming a joined-together “fi”. Dyslexic readers may struggle with ligatures, so we can disable the feature with font-variant-ligatures: none, though this may be disabled automatically by some browsers when the letter spacing is set high enough.
• I learned about Heydon Pickering’s owl selector (* + *), which can be used to apply consistent line-spacing, e.g. * + * { margin-top: 1.5em }.
• John finishes up by applying a slightly bigger font weight to his text, to counteract the extra whitespace (font-weight: 600, which is “demi-bold”, apparently). He also applies style to his bold text, to differentiate it from the demi-bold regular text: .dyslexia-mode strong { color: #000 }.
• There’s also a tip around avoiding unnecessarily distracting elements, such as background images, for which you can use the :not pseudo-class. Example: body:not(.dyslexia-mode) main { background-image: url("...") }.
• The article concludes with a CodePen showing the before-and-after. The comments below the article are also worth a read.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.