My Epic FEL talk from 26th September, where I cover some of the problems icon fonts pose for dyslexics
Death to Icon Fonts@ninjanailsEpic FEL, Sept 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 250M+ 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 aa a aThey’re scalable
aa aa a aThey 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 TriangleA 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/
https://www.flickr.com/photos/spackletoe/90811910/
Image tag
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="20px" height="20px" viewBox="0 0 20 20"enable-background="new 0 0 20 20" xml:space="preserve">miterlimit="10"points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.88715.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592,8.112 8.015,8.112 "/>SVG tag
homenewspaperIcon system
.star {background: url(star.svg);display: block;width: 83px;height: 83px;background-size: 83px 83px;}CSS background image
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/
Icon Fonts vs SVG
Context!
Menu
MenuMenuMenu
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/