Death to Icon Fonts

My London Web Standards talk from 29th June 2015, where I cover some of the problems icon fonts pose for dyslexics

Transcript

1. Death to Icon Fonts @ninjanails! LWS, June 2015 https://www.flickr.com/photos/minifig/3186925111/
3. 1 in 10 are Dyslexic
4. Flatulent clams
5. Flatulent clams
6. Flatulent clams Fraudulent claims
7. http://www.cafepress.co.uk/mf/94227980/keep-clam-and-stop-dyslexia_mugs
8. https://www.flickr.com/photos/jonathancohen/4084485753/
9. Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
10. bp
11. bp
12. Gill Sans rnm MW dpqb l1IijJ Verdana rnm MW dpqb l1IijJ OpenDyslexic rnm MW dpqb l1IijJ Times rnm MW dpqb l1IijJ Helvetica rnm MW dpqb l1IijJ
16. But all too often I see:
17. Let’s pick on GitHub…
18. Let’s pick on GitHub…
19. Let’s pick on GitHub…
21. https://www.flickr.com/photos/3059349393/3801594313/ Some users may be hidden…
22. People have different needs! https://www.flickr.com/photos/oskay/265899766/
23. Screen Readers
24. Favourite How would a screen reader read…
25. Favourite “Favourite”
26. Favourite “Black Star Favourite” or “Star Favourite”
27. Favourite “Unpronounceable Favourite”
28. http://unicode.johnholtripley.co.uk
29. https://www.flickr.com/photos/nouqraz/308342941/ Are we forgetting some people?
30. Opera Mini
31. “… We don’t download fonts; icons are what SVG is for.”! Bruce Lawson, Opera https://www.flickr.com/photos/zeldman/14064254462/
32. “This doesn’t just benefit Opera Mini users; many people with mild dyslexia have a special system font to aid legibility, which breaks icon fonts.”! Bruce Lawson, Opera https://dev.opera.com/articles/making-sites-work-opera-mini/
33. Opera Mini has 350M+ users (And then there’s Nokia Xpress, Blackberry 4 & 5, Android 2.1, Windows 7)
34. https://www.flickr.com/photos/subharnab/2721507697/ And then there’s you…
35. https://goo.gl/EpsOu8
38. https://speakerdeck.com/zachleat/remodeling-at-font-face
39. Why do we use Icon Fonts?
40. Does everything a normal font can!
41. a a a ! ! ! They’re scalable
42. a a a ! ! ! They can be styled
43. https://www.flickr.com/photos/a_funk/3482647938/ Reduces number of HTTP requests
44. https://www.flickr.com/photos/dajdavies/9479980440/in/photostream/ Is there a better alternative?
45. https://www.google.com/design/icons/ SVG
46. https://www.flickr.com/photos/anjan58/7272291392/ Accessibility
47. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" aria-labelledby="title desc">! ! <title id="title">Green Triangle</title>! ! <desc id="desc">A light green triangle with a dark green border.</desc>! ! <polygon points="5,5 195,5 10,195"></polygon>! </svg>!
48. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" aria-labelledby="title desc">! ! <title id="title">Green Triangle</title>! ! <desc id="desc">A light green triangle with a dark green border.</desc>! ! <polygon points="5,5 195,5 10,195"></polygon>! </svg>!
49. https://www.filamentgroup.com/lab/grumpicon-workflow.html Scalable
50. Multi coloured! By Peepo (Own work) [Public domain], via Wikimedia Commons
51. Can be animated http://codepen.io/kyleHenwood/full/Alayb/
55. Retina https://www.flickr.com/photos/benm_at/8857900520/
56. Right way of doing it
57. http://caniuse.com/#search=svg Supported in modern browsers
58. “Icon font perf in Chrome is ~5x SVG atm”! Addy Osmani, Google https://www.flickr.com/photos/see_also/15049247418/
59. Context!
60. Menu
61. Menu
63. Menu
65. Menu Menu
66. http://i2.cdnds.net/12/30/618x377/showbiz_opening_ceremony_4.jpg So why don’t we build it this way?
67. https://www.flickr.com/photos/kitty-kat/6049220331/
68. https://www.flickr.com/photos/kitty-kat/6049220331/
69. https://www.flickr.com/photos/kitty-kat/6049220331/
70. https://www.flickr.com/photos/kitty-kat/6049220331/
71. https://www.flickr.com/photos/kitty-kat/6049220331/
72. @ninjanails serendavies.me ninjanails.com https://www.flickr.com/photos/jenosaur/4051305996/