Death to Icon Fonts

My Code Motion Amsterdam talk from 12th May 2016, where I cover some of the problems icon fonts pose for dyslexics

Transcript

1. Death to Icon Fonts @ninjanails CodeMotion, May 2016 https://www.flickr.com/photos/minifig/3186925111/
3. 1 in 10 are Dyslexic
4. Flatulent clams
5. Flatulent clams Fraudulent claims
6. http://www.cafepress.co.uk/mf/94227980/keep-clam-and-stop-dyslexia_mugs
7. https://www.flickr.com/photos/jonathancohen/4084485753/
8. 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
9. bp
10. bp
11. 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 #DZY
14. But all too often I see:
15. Let’s pick on old GitHub…
16. Let’s pick on old GitHub…
17. Let’s pick on old GitHub… #DZY
19. https://www.flickr.com/photos/3059349393/3801594313/ Some users may be hidden…
20. People have different needs! https://www.flickr.com/photos/oskay/265899766/ https://www.flickr.com/photos/oskay/265899766/
21. Screen Readers
22. Favourite How would a screen reader read…
23. Favourite “Favourite”
24. Favourite “Black Star Favourite” or “Star Favourite”
25. Favourite “Unpronounceable Favourite”
26. http://unicode.johnholtripley.co.uk
27. https://www.flickr.com/photos/nouqraz/308342941/ Are we forgetting some people?
28. Opera Mini
29. “… We don’t download fonts; icons are what SVG is for.” Bruce Lawson, Opera https://www.flickr.com/photos/zeldman/14064254462/
30. “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/
31. Opera Mini has 250M+ users (And then there’s Nokia Xpress, Blackberry 4 & 5, Android 2.1, Windows 7)
32. https://www.flickr.com/photos/subharnab/2721507697/ And then there’s you…
33. https://goo.gl/EpsOu8
36. 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 a a a They’re scalable
42. a a a 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 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/ 1999/xlink" width="200" height="200" aria-labelledby=“title desc" viewBox="0 0 32 32"> <title id="title">Rating star</title> <desc id="desc">A white star with a black border.</desc> <path fill="#444" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path> </svg>
48. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/ 1999/xlink" width="200" height="200" aria-labelledby=“title desc" viewBox="0 0 32 32"> <title id="title">Rating star</title> <desc id="desc">A white star with a black border.</desc> <path fill="#444" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path> </svg>
49. https://www.filamentgroup.com/lab/grumpicon-workflow.html Scalable
50. Multi coloured! By Peepo (Own work) [Public domain], via Wikimedia Commons #DZY
51. Can be animated http://codepen.io/kyleHenwood/full/Alayb/
54. Retina https://www.flickr.com/photos/benm_at/8857900520/
55. https://www.flickr.com/photos/spackletoe/90811910/
56. <img src="smiley.svg" alt="Smiley face" role="image"> <img>
57. <img src="smiley.svg" alt="Smiley face" role="image"> <img>
58. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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"> <polygon fill="#FFFFFF" stroke="#000000" stroke- miterlimit="10" points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887 15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592, 8.112 8.015,8.112 "/> </svg> <svg>
59. <svg> <defs> <symbol id="icon-home" viewBox="0 0 1024 1024"> <title>home</title> <path class="path1" d="M1024 590.444l-512-397.426-512 397.428v-162.038l512-397.426 512 397.428zM896 576v384h-256v-256h-256v256h-256v-384l384-288z"></path> </symbol> <symbol id="icon-newspaper" viewBox="0 0 1024 1024"> <title>newspaper</title> <path class="path1" d="M896 256v-128h-896v704c0 35.346 28.654 64 64 64h864c53.022 0 96-42.978 96-96v-544h-128zM832 832h-768v-640h768v640 320h640v64h-640zM512 448h256v64h-256zM512 576h256v64h-256zM512 704h192v64h-192zM128 448h320v320h-320z"></path> </symbol> </defs> </svg> Icon System - defining
60. Icon System - using <svg class="inline-svg icon-home"> <use xlink:href="#svg-earth"></use> </svg>
61. .star { background: url(star.svg); display: block; width: 83px; height: 83px; background-size: 83px 83px; } css background
62. Right way of doing it
63. Supported in modern browsers http://caniuse.com/#feat=svg
65. “Icon font perf in Chrome is ~5x SVG atm” Addy Osmani, Google https://www.flickr.com/photos/see_also/15049247418/
66. Icon Fonts vs SVG
69. Remember GitHub
70. https://github.com/blog/2112-delivering-octicons-with-svg
71. Context!
72. Menu
73. Menu
75. Menu
77. Menu Menu Menu
78. http://i2.cdnds.net/12/30/618x377/showbiz_opening_ceremony_4.jpg So why don’t we build it this way?
79. https://www.flickr.com/photos/kitty-kat/6049220331/
80. @ninjanails serendavies.me ninjanails.com https://www.flickr.com/photos/jenosaur/4051305996/