My London Web Standards talk from 29th June 2015, where I cover some of the problems icon fonts pose for dyslexics
Death to Icon Fonts@ninjanails!LWS, June 2015https://www.flickr.com/photos/minifig/3186925111/
View Slide
1 in 10 are Dyslexic
Flatulent clams
Flatulent clamsFraudulent claims
http://www.cafepress.co.uk/mf/94227980/keep-clam-and-stop-dyslexia_mugs
https://www.flickr.com/photos/jonathancohen/4084485753/
Aa Bb Cc Dd Ee FfGg Hh Ii Jj Kk LlMm Nn Oo Pp Qq RrSs Tt Uu Vv Ww XxYy Zz
bp
Gill Sans rnm MW dpqb l1IijJVerdana rnm MW dpqb l1IijJOpenDyslexic rnm MW dpqb l1IijJTimes rnm MW dpqb l1IijJHelvetica rnm MW dpqb l1IijJ
But all too often I see:
Let’s pick on GitHub…
https://www.flickr.com/photos/3059349393/3801594313/Some users may be hidden…
People have different needs!https://www.flickr.com/photos/oskay/265899766/
Screen Readers
FavouriteHow would a screen reader read…
Favourite“Favourite”
Favourite“Black Star Favourite” or“Star Favourite”
Favourite“Unpronounceable Favourite”
http://unicode.johnholtripley.co.uk
https://www.flickr.com/photos/nouqraz/308342941/Are we forgetting some people?
Opera Mini
“… We don’t download fonts;icons are what SVG is for.”!Bruce Lawson, Operahttps://www.flickr.com/photos/zeldman/14064254462/
“This doesn’t just benefit OperaMini users; many people withmild dyslexia have a specialsystem font to aid legibility,which breaks icon fonts.”!Bruce Lawson, Operahttps://dev.opera.com/articles/making-sites-work-opera-mini/
Opera Mini has 350M+ users(And then there’s Nokia Xpress, Blackberry 4 & 5,Android 2.1, Windows 7)
https://www.flickr.com/photos/subharnab/2721507697/And then there’s you…
https://goo.gl/EpsOu8
https://speakerdeck.com/zachleat/remodeling-at-font-face
Why do we use IconFonts?
Does everything anormal font can!
aa a! ! !They’re scalable
aa a! ! !They can be styled
https://www.flickr.com/photos/a_funk/3482647938/Reduces number of HTTP requests
https://www.flickr.com/photos/dajdavies/9479980440/in/photostream/Is there a better alternative?
https://www.google.com/design/icons/SVG
https://www.flickr.com/photos/anjan58/7272291392/Accessibility
height="200" aria-labelledby="title desc">!! Green Triangle!! A light green triangle with a dark greenborder.!! !!
https://www.filamentgroup.com/lab/grumpicon-workflow.htmlScalable
Multi coloured!By Peepo (Own work) [Public domain], via Wikimedia Commons
Can be animatedhttp://codepen.io/kyleHenwood/full/Alayb/
Retinahttps://www.flickr.com/photos/benm_at/8857900520/
Right way of doing it
http://caniuse.com/#search=svgSupported in modern browsers
“Icon font perf in Chrome is ~5x SVG atm”!Addy Osmani, Googlehttps://www.flickr.com/photos/see_also/15049247418/
Context!
Menu
MenuMenu
http://i2.cdnds.net/12/30/618x377/showbiz_opening_ceremony_4.jpgSo why don’t we build it this way?
https://www.flickr.com/photos/kitty-kat/6049220331/
@ninjanailsserendavies.meninjanails.comhttps://www.flickr.com/photos/jenosaur/4051305996/