Death to Icon Fonts

Efd0c1018490daf4954ccb96eaa85a9e?s=47 SerenD
September 26, 2015

Death to Icon Fonts

My Epic FEL talk from 26th September, where I cover some of the problems icon fonts pose for dyslexics

Efd0c1018490daf4954ccb96eaa85a9e?s=128

SerenD

September 26, 2015
Tweet

Transcript

  1. Death to Icon Fonts @ninjanails Epic FEL, Sept 2015 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
  12. None
  13. None
  14. None
  15. But all too often I see:

  16. Let’s pick on GitHub…

  17. Let’s pick on GitHub…

  18. Let’s pick on GitHub…

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

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

  22. Screen Readers

  23. Favourite How would a screen reader read…

  24. Favourite “Favourite”

  25. Favourite “Black Star Favourite” or “Star Favourite”

  26. Favourite “Unpronounceable Favourite”

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

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

  29. Opera Mini

  30. “… We don’t download fonts; icons are what SVG is

    for.” Bruce Lawson, Opera https://www.flickr.com/photos/zeldman/14064254462/
  31. “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/
  32. Opera Mini has 250M+ users (And then there’s Nokia Xpress,

    Blackberry 4 & 5, Android 2.1, Windows 7)
  33. https://www.flickr.com/photos/subharnab/2721507697/ And then there’s you…

  34. https://goo.gl/EpsOu8

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

  38. None
  39. None
  40. Why do we use Icon Fonts?

  41. Does everything a normal font can!

  42. a a a a a a They’re scalable

  43. a a a a a a They can be styled

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

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

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

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

  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. <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>
  50. https://www.filamentgroup.com/lab/grumpicon-workflow.html Scalable

  51. Multi coloured! By Peepo (Own work) [Public domain], via Wikimedia

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

  53. None
  54. None
  55. None
  56. Retina https://www.flickr.com/photos/benm_at/8857900520/

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

  58. <img src="smiley.svg" alt="Smiley face"> Image tag

  59. <body> <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> </body> SVG tag
  60. <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-640h768v640zM128 320h640v64h-640zM512 448h256v64h-256zM512 576h256v64h-256zM512 704h192v64h-192zM128 448h320v320h-320z"></path> </symbol> </defs> </svg> Icon system
  61. .star { background: url(star.svg); display: block; width: 83px; height: 83px;

    background-size: 83px 83px; } CSS background image
  62. Right way of doing it

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

  64. “Icon font perf in Chrome is ~5x SVG atm” Addy

    Osmani, Google https://www.flickr.com/photos/see_also/15049247418/
  65. Icon Fonts vs SVG

  66. None
  67. None
  68. Context!

  69. Menu

  70. Menu

  71. None
  72. Menu

  73. None
  74. Menu Menu Menu

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

  76. None
  77. None
  78. None
  79. None
  80. https://www.flickr.com/photos/kitty-kat/6049220331/

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