Pro Yearly is on sale from $80 to $50! »

Death to Icon Fonts

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

Efd0c1018490daf4954ccb96eaa85a9e?s=128

SerenD

June 29, 2015
Tweet

Transcript

  1. Death to Icon Fonts @ninjanails! LWS, June 2015 https://www.flickr.com/photos/minifig/3186925111/

  2. None
  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
  13. None
  14. None
  15. None
  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…

  20. None
  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

  36. None
  37. None
  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/

  52. None
  53. None
  54. None
  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

  62. None
  63. Menu

  64. None
  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/