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/
   

   View Slide

2. View Slide

3. 1 in 10 are Dyslexic
   

   View Slide

4. Flatulent clams
   

   View Slide

5. Flatulent clams
   Fraudulent claims
   

   View Slide

6. http://www.cafepress.co.uk/mf/94227980/keep-clam-and-stop-dyslexia_mugs
   

   View Slide

7. https://www.flickr.com/photos/jonathancohen/4084485753/
   

   View Slide

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
   

   View Slide

9. bp
   

   View Slide

10. bp
    

    View Slide

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
    

    View Slide

12. View Slide

13. View Slide

14. But all too often I see:
    

    View Slide

15. Let’s pick on old GitHub…
    

    View Slide

16. Let’s pick on old GitHub…
    

    View Slide

17. Let’s pick on old GitHub… #DZY
    

    View Slide

18. View Slide

19. https://www.flickr.com/photos/3059349393/3801594313/
    Some users may be hidden…
    

    View Slide

20. People have different needs!
    https://www.flickr.com/photos/oskay/265899766/
    https://www.flickr.com/photos/oskay/265899766/
    

    View Slide

21. Screen Readers
    

    View Slide

22. Favourite
    How would a screen reader read…
    

    View Slide

23. Favourite
    “Favourite”
    

    View Slide

24. Favourite
    “Black Star Favourite” or
    “Star Favourite”
    

    View Slide

25. Favourite
    “Unpronounceable Favourite”
    

    View Slide

26. http://unicode.johnholtripley.co.uk
    

    View Slide

27. https://www.flickr.com/photos/nouqraz/308342941/
    Are we forgetting some people?
    

    View Slide

28. Opera Mini
    

    View Slide

29. “… We don’t download fonts;
    icons are what SVG is for.”
    Bruce Lawson, Opera
    https://www.flickr.com/photos/zeldman/14064254462/
    

    View Slide

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/
    

    View Slide

31. Opera Mini has 250M+ users
    (And then there’s Nokia Xpress, Blackberry 4 & 5,
    Android 2.1, Windows 7)
    

    View Slide

32. https://www.flickr.com/photos/subharnab/2721507697/
    And then there’s you…
    

    View Slide

33. https://goo.gl/EpsOu8
    

    View Slide

34. View Slide

35. View Slide

36. https://speakerdeck.com/zachleat/remodeling-at-font-face
    

    View Slide

37. View Slide

38. View Slide

39. Why do we use Icon
    Fonts?
    

    View Slide

40. Does everything a
    normal font can!
    

    View Slide

41. a
    a a
    a a a
    They’re scalable
    

    View Slide

42. a
    a a
    a a a
    They can be styled
    

    View Slide

43. https://www.flickr.com/photos/a_funk/3482647938/
    Reduces number of HTTP requests
    

    View Slide

44. https://www.flickr.com/photos/dajdavies/9479980440/in/photostream/
    Is there a better alternative?
    

    View Slide

45. https://www.google.com/design/icons/
    SVG
    

    View Slide

46. https://www.flickr.com/photos/anjan58/7272291392/
    Accessibility
    

    View Slide

47. 
    Rating star
    A white star with a black border.
    
    
    

    View Slide

48. 
    Rating star
    A white star with a black border.
    
    
    

    View Slide

49. https://www.filamentgroup.com/lab/grumpicon-workflow.html
    Scalable
    

    View Slide

50. Multi coloured!
    By Peepo (Own work) [Public domain], via Wikimedia Commons
    #DZY
    

    View Slide

51. Can be animated
    http://codepen.io/kyleHenwood/full/Alayb/
    

    View Slide

52. View Slide

53. View Slide

54. Retina
    https://www.flickr.com/photos/benm_at/8857900520/
    

    View Slide

55. https://www.flickr.com/photos/spackletoe/90811910/
    

    View Slide

56. 
    
    

    View Slide

57. 
    
    

    View Slide

58. 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.887
    15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592,
    8.112 8.015,8.112 "/>
    
    
    

    View Slide

59. 
    
    
    home
    
    
    
    newspaper
    
    
    
    
    Icon System - defining
    

    View Slide

60. Icon System - using
    
    
    
    

    View Slide

61. .star {
    background: url(star.svg);
    display: block;
    width: 83px;
    height: 83px;
    background-size: 83px 83px;
    }
    css background
    

    View Slide

62. Right way of doing it
    

    View Slide

63. Supported in modern browsers
    http://caniuse.com/#feat=svg
    

    View Slide

64. View Slide

65. “Icon font perf in Chrome is ~5x SVG atm”
    Addy Osmani, Google
    https://www.flickr.com/photos/see_also/15049247418/
    

    View Slide

66. Icon Fonts vs SVG
    

    View Slide

67. View Slide

68. View Slide

69. Remember GitHub
    

    View Slide

70. https://github.com/blog/2112-delivering-octicons-with-svg
    

    View Slide

71. Context!
    

    View Slide

72. Menu
    

    View Slide

73. Menu
    

    View Slide

74. View Slide

75. Menu
    

    View Slide

76. View Slide

77. Menu
    Menu
    Menu
    

    View Slide

78. http://i2.cdnds.net/12/30/618x377/showbiz_opening_ceremony_4.jpg
    So why don’t we build it this way?
    

    View Slide

79. https://www.flickr.com/photos/kitty-kat/6049220331/
    

    View Slide

80. @ninjanails
    serendavies.me
    ninjanails.com
    https://www.flickr.com/photos/jenosaur/4051305996/
    

    View Slide