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

    bp

  4. 11.

    bp

  5. 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
  6. 13.
  7. 14.
  8. 15.
  9. 20.
  10. 31.

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

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

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

    Blackberry 4 & 5, Android 2.1, Windows 7)
  13. 36.
  14. 37.
  15. 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>!
  16. 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>!
  17. 52.
  18. 53.
  19. 54.
  20. 58.

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

    Osmani, Google https://www.flickr.com/photos/see_also/15049247418/
  21. 59.
  22. 60.
  23. 61.
  24. 62.
  25. 63.
  26. 64.
  27. 65.