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

Death to Icon Fonts

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

Efd0c1018490daf4954ccb96eaa85a9e?s=128

SerenD

May 11, 2016
Tweet

Transcript

  1. Death to Icon Fonts @ninjanails CodeMotion, May 2016 https://www.flickr.com/photos/minifig/3186925111/

  2. None
  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
  12. None
  13. None
  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

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

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

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

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

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

  67. None
  68. None
  69. Remember GitHub

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

  71. Context!

  72. Menu

  73. Menu

  74. None
  75. Menu

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