3 ms·

Notably the study PDF linked is broken, but the link provided to adrianroselli.com provides a good short list for accessibility for dyslexic users which mirror

Notably the study PDF linked is broken, but the link provided to adrianroselli.com provides a good short list for accessibility for dyslexic users which mirror general good rules for typography. The most important take away comes from one from a presentation linked on adrianroselli.com's page. Some users do prefer the dyslexia fonts and they use a simple font stack overwrite methodology, which makes a global CSS rule. This works fine except when it doesn't. Icon fonts break thus this creates an accessibility issue as suddenly pages can become somewhat vague as all the font icons appear as the missing box icon. Best thing you can do as web dev is allow users to font replace and not use icon fonts.

extrapickles 10y ago
Isn't this the sort of thing the CSS descriptor unicode-range is supposed to solve? In icon fonts I've used, the icons are always in the Private Use code block (eg: font awesome uses U+F000-F2B4), so if the unicode-range in the replacement font is set correctly (say U+0000-DFFF), it will not clobber the icon fonts, letting the designers have their spiffy icons without having to do the annoying large image file/sprites pattern. The best part of using unicode-range is that it does not impact accessibility and most sites should use unicode-range correctly anyways, as it can save download time for the users by not forcing them to download the parts of the font for different languages (dev must split languages into different files though as the browser can't only download the code-points covered by unicode range). Even if a site does not use unicode-range, you can still use it to only overlay the part of the font you care about (the readable characters). See https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/... for details and an example of what unicode-range can do.
ZeroGravitas 10y ago
How do users with these requiremnts replace fonts with this "font stack overwrite methodology"? Do they have browser extensions to do this?

extrapickles 10y ago

Isn't this the sort of thing the CSS descriptor unicode-range is supposed to solve? In icon fonts I've used, the icons are always in the Private Use code block (eg: font awesome uses U+F000-F2B4), so if the unicode-range in the replacement font is set correctly (say U+0000-DFFF), it will not clobber the icon fonts, letting the designers have their spiffy icons without having to do the annoying large image file/sprites pattern. The best part of using unicode-range is that it does not impact accessibility and most sites should use unicode-range correctly anyways, as it can save download time for the users by not forcing them to download the parts of the font for different languages (dev must split languages into different files though as the browser can't only download the code-points covered by unicode range). Even if a site does not use unicode-range, you can still use it to only overlay the part of the font you care about (the readable characters). See https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/... for details and an example of what unicode-range can do.

ZeroGravitas 10y ago

How do users with these requiremnts replace fonts with this "font stack overwrite methodology"? Do they have browser extensions to do this?