Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Death to Icon Fonts - Seren Davies - Codemotion Amsterdam 2016

590 views

Published on

Do you use icon fonts? Are you aware of their shortcomings? In this talk Seren will highlight some of the accessibility issues that icon fonts have and discuss an alternative.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Death to Icon Fonts - Seren Davies - Codemotion Amsterdam 2016

  1. 1. Death to Icon Fonts @ninjanails CodeMotion, May 2016 https://www.flickr.com/photos/minifig/3186925111/
  2. 2. 1 in 10 are Dyslexic
  3. 3. Flatulent clams
  4. 4. Flatulent clams Fraudulent claims
  5. 5. http://www.cafepress.co.uk/mf/94227980/keep-clam-and-stop-dyslexia_mugs
  6. 6. https://www.flickr.com/photos/jonathancohen/4084485753/
  7. 7. 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
  8. 8. bp
  9. 9. bp
  10. 10. 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
  11. 11. But all too often I see:
  12. 12. Let’s pick on old GitHub…
  13. 13. Let’s pick on old GitHub…
  14. 14. Let’s pick on old GitHub… #DZY
  15. 15. https://www.flickr.com/photos/3059349393/3801594313/ Some users may be hidden…
  16. 16. People have different needs! https://www.flickr.com/photos/oskay/265899766/https://www.flickr.com/photos/oskay/265899766/
  17. 17. Screen Readers
  18. 18. Favourite How would a screen reader read…
  19. 19. Favourite “Favourite”
  20. 20. Favourite “Black Star Favourite” or “Star Favourite”
  21. 21. Favourite “Unpronounceable Favourite”
  22. 22. http://unicode.johnholtripley.co.uk
  23. 23. https://www.flickr.com/photos/nouqraz/308342941/ Are we forgetting some people?
  24. 24. Opera Mini
  25. 25. “… We don’t download fonts; icons are what SVG is for.” Bruce Lawson, Opera https://www.flickr.com/photos/zeldman/14064254462/
  26. 26. “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/
  27. 27. Opera Mini has 250M+ users (And then there’s Nokia Xpress, Blackberry 4 & 5, Android 2.1, Windows 7)
  28. 28. https://www.flickr.com/photos/subharnab/2721507697/ And then there’s you…
  29. 29. https://goo.gl/EpsOu8
  30. 30. https://speakerdeck.com/zachleat/remodeling-at-font-face
  31. 31. Why do we use Icon Fonts?
  32. 32. Does everything a normal font can!
  33. 33. a a a a a a They’re scalable
  34. 34. a a a a a a They can be styled
  35. 35. https://www.flickr.com/photos/a_funk/3482647938/ Reduces number of HTTP requests
  36. 36. https://www.flickr.com/photos/dajdavies/9479980440/in/photostream/ Is there a better alternative?
  37. 37. https://www.google.com/design/icons/ SVG
  38. 38. https://www.flickr.com/photos/anjan58/7272291392/ Accessibility
  39. 39. <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>
  40. 40. <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>
  41. 41. https://www.filamentgroup.com/lab/grumpicon-workflow.html Scalable
  42. 42. Multi coloured! By Peepo (Own work) [Public domain], via Wikimedia Commons #DZY
  43. 43. Can be animated http://codepen.io/kyleHenwood/full/Alayb/
  44. 44. Retina https://www.flickr.com/photos/benm_at/8857900520/
  45. 45. https://www.flickr.com/photos/spackletoe/90811910/
  46. 46. <img src="smiley.svg" alt="Smiley face" role="image"> <img>
  47. 47. <img src="smiley.svg" alt="Smiley face" role="image"> <img>
  48. 48. <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>
  49. 49. <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
  50. 50. Icon System - using <svg class="inline-svg icon-home"> <use xlink:href="#svg-earth"></use> </svg>
  51. 51. .star { background: url(star.svg); display: block; width: 83px; height: 83px; background-size: 83px 83px; } css background
  52. 52. Right way of doing it
  53. 53. Supported in modern browsers http://caniuse.com/#feat=svg
  54. 54. “Icon font perf in Chrome is ~5x SVG atm” Addy Osmani, Google https://www.flickr.com/photos/see_also/15049247418/
  55. 55. Icon Fonts vs SVG
  56. 56. Remember GitHub
  57. 57. https://github.com/blog/2112-delivering-octicons-with-svg
  58. 58. Context!
  59. 59. Menu
  60. 60. Menu
  61. 61. Menu
  62. 62. Menu Menu Menu
  63. 63. http://i2.cdnds.net/12/30/618x377/showbiz_opening_ceremony_4.jpg So why don’t we build it this way?
  64. 64. https://www.flickr.com/photos/kitty-kat/6049220331/
  65. 65. @ninjanails serendavies.me ninjanails.com https://www.flickr.com/photos/jenosaur/4051305996/

×