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/
   

   View Slide

2. View Slide

3. 1 in 10 are Dyslexic
   

   View Slide

4. Flatulent clams
   

   View Slide

5. Flatulent clams
   

   View Slide

6. Flatulent clams
   Fraudulent claims
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

10. bp
    

    View Slide

11. bp
    

    View Slide

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
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. But all too often I see:
    

    View Slide

17. Let’s pick on GitHub…
    

    View Slide

18. Let’s pick on GitHub…
    

    View Slide

19. Let’s pick on GitHub…
    

    View Slide

20. View Slide

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

    View Slide

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

    View Slide

23. Screen Readers
    

    View Slide

24. Favourite
    How would a screen reader read…
    

    View Slide

25. Favourite
    “Favourite”
    

    View Slide

26. Favourite
    “Black Star Favourite” or
    “Star Favourite”
    

    View Slide

27. Favourite
    “Unpronounceable Favourite”
    

    View Slide

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

    View Slide

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

    View Slide

30. Opera Mini
    

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

35. https://goo.gl/EpsOu8
    

    View Slide

36. View Slide

37. View Slide

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

    View Slide

39. Why do we use Icon
    Fonts?
    

    View Slide

40. Does everything a
    normal font can!
    

    View Slide

41. a
    a a
    ! ! !
    They’re scalable
    

    View Slide

42. 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. height="200" aria-labelledby="title desc">!
    ! Green Triangle!
    ! A light green triangle with a dark green
    border.!
    ! !
    !
    

    View Slide

48. height="200" aria-labelledby="title desc">!
    ! Green Triangle!
    ! A light green triangle with a dark green
    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
    

    View Slide

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

    View Slide

52. View Slide

53. View Slide

54. View Slide

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

    View Slide

56. Right way of doing it
    

    View Slide

57. http://caniuse.com/#search=svg
    Supported in modern browsers
    

    View Slide

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

    View Slide

59. Context!
    

    View Slide

60. Menu
    

    View Slide

61. Menu
    

    View Slide

62. View Slide

63. Menu
    

    View Slide

64. View Slide

65. Menu
    Menu
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide