Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

SerenD

May 11, 2016
Tweet

More Decks by SerenD

Other Decks in Programming

Transcript

  1. Death to Icon Fonts
    @ninjanails
    CodeMotion, May 2016
    https://www.flickr.com/photos/minifig/3186925111/

    View full-size slide

  2. 1 in 10 are Dyslexic

    View full-size slide

  3. Flatulent clams

    View full-size slide

  4. Flatulent clams
    Fraudulent claims

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  8. 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

    View full-size slide

  9. But all too often I see:

    View full-size slide

  10. Let’s pick on old GitHub…

    View full-size slide

  11. Let’s pick on old GitHub…

    View full-size slide

  12. Let’s pick on old GitHub… #DZY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Screen Readers

    View full-size slide

  16. Favourite
    How would a screen reader read…

    View full-size slide

  17. Favourite
    “Favourite”

    View full-size slide

  18. Favourite
    “Black Star Favourite” or
    “Star Favourite”

    View full-size slide

  19. Favourite
    “Unpronounceable Favourite”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

  26. https://goo.gl/EpsOu8

    View full-size slide

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

    View full-size slide

  28. Why do we use Icon
    Fonts?

    View full-size slide

  29. Does everything a
    normal font can!

    View full-size slide

  30. a
    a a
    a a a
    They’re scalable

    View full-size slide

  31. a
    a a
    a a a
    They can be styled

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  36. Rating star
    A white star with a black border.


    View full-size slide


  37. Rating star
    A white star with a black border.


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. 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 "/>


    View full-size slide




  44. home



    newspaper




    Icon System - defining

    View full-size slide

  45. Icon System - using



    View full-size slide

  46. .star {
    background: url(star.svg);
    display: block;
    width: 83px;
    height: 83px;
    background-size: 83px 83px;
    }
    css background

    View full-size slide

  47. Right way of doing it

    View full-size slide

  48. Supported in modern browsers
    http://caniuse.com/#feat=svg

    View full-size slide

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

    View full-size slide

  50. Icon Fonts vs SVG

    View full-size slide

  51. Remember GitHub

    View full-size slide

  52. https://github.com/blog/2112-delivering-octicons-with-svg

    View full-size slide

  53. Menu
    Menu
    Menu

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide