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. 2.
  2. 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
  3. 9.

    bp

  4. 10.

    bp

  5. 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
  6. 12.
  7. 13.
  8. 18.
  9. 29.

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

    for.” Bruce Lawson, Opera https://www.flickr.com/photos/zeldman/14064254462/
  10. 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/
  11. 31.

    Opera Mini has 250M+ users (And then there’s Nokia Xpress,

    Blackberry 4 & 5, Android 2.1, Windows 7)
  12. 34.
  13. 35.
  14. 37.
  15. 38.
  16. 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>
  17. 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>
  18. 52.
  19. 53.
  20. 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>
  21. 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
  22. 64.
  23. 65.

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

    Osmani, Google https://www.flickr.com/photos/see_also/15049247418/
  24. 67.
  25. 68.
  26. 71.
  27. 72.
  28. 73.
  29. 74.
  30. 75.
  31. 76.