$30 off During Our Annual Pro Sale. View Details »

Death to Icon Fonts

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

SerenD

September 26, 2015
Tweet

More Decks by SerenD

Other Decks in Technology

Transcript

  1. Death to Icon Fonts
    @ninjanails
    Epic FEL, Sept 2015
    https://www.flickr.com/photos/minifig/3186925111/

    View Slide

  2. View Slide

  3. 1 in 10 are Dyslexic

    View Slide

  4. Flatulent clams

    View Slide

  5. Flatulent clams
    Fraudulent claims

    View Slide

  6. http://www.cafepress.co.uk/mf/94227980/keep-clam-and-stop-dyslexia_mugs

    View Slide

  7. https://www.flickr.com/photos/jonathancohen/4084485753/

    View Slide

  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

    View Slide

  9. bp

    View Slide

  10. bp

    View Slide

  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

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. But all too often I see:

    View Slide

  16. Let’s pick on GitHub…

    View Slide

  17. Let’s pick on GitHub…

    View Slide

  18. Let’s pick on GitHub…

    View Slide

  19. View Slide

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

    View Slide

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

    View Slide

  22. Screen Readers

    View Slide

  23. Favourite
    How would a screen reader read…

    View Slide

  24. Favourite
    “Favourite”

    View Slide

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

    View Slide

  26. Favourite
    “Unpronounceable Favourite”

    View Slide

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

    View Slide

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

    View Slide

  29. Opera Mini

    View Slide

  30. “… We don’t download fonts;
    icons are what SVG is for.”
    Bruce Lawson, Opera
    https://www.flickr.com/photos/zeldman/14064254462/

    View Slide

  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/

    View Slide

  32. Opera Mini has 250M+ users
    (And then there’s Nokia Xpress, Blackberry 4 & 5,
    Android 2.1, Windows 7)

    View Slide

  33. https://www.flickr.com/photos/subharnab/2721507697/
    And then there’s you…

    View Slide

  34. https://goo.gl/EpsOu8

    View Slide

  35. View Slide

  36. View Slide

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

    View Slide

  38. View Slide

  39. View Slide

  40. Why do we use Icon
    Fonts?

    View Slide

  41. Does everything a
    normal font can!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. height="200" aria-labelledby="title desc">
    Green Triangle
    A light green triangle with a dark green
    border.


    View Slide

  49. height="200" aria-labelledby="title desc">
    Green Triangle
    A light green triangle with a dark green
    border.


    View Slide

  50. https://www.filamentgroup.com/lab/grumpicon-workflow.html
    Scalable

    View Slide

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

    View Slide

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

    View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. Retina
    https://www.flickr.com/photos/benm_at/8857900520/

    View Slide

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

    View Slide


  58. Image tag

    View Slide


  59. 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">
    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 tag

    View Slide




  60. home



    newspaper




    Icon system

    View Slide

  61. .star {
    background: url(star.svg);
    display: block;
    width: 83px;
    height: 83px;
    background-size: 83px 83px;
    }
    CSS background image

    View Slide

  62. Right way of doing it

    View Slide

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

    View Slide

  64. “Icon font perf in Chrome is ~5x SVG atm”
    Addy Osmani, Google
    https://www.flickr.com/photos/see_also/15049247418/

    View Slide

  65. Icon Fonts vs SVG

    View Slide

  66. View Slide

  67. View Slide

  68. Context!

    View Slide

  69. Menu

    View Slide

  70. Menu

    View Slide

  71. View Slide

  72. Menu

    View Slide

  73. View Slide

  74. Menu
    Menu
    Menu

    View Slide

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

    View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. https://www.flickr.com/photos/kitty-kat/6049220331/

    View Slide

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

    View Slide