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

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

SerenD

June 29, 2015
Tweet

More Decks by SerenD

Other Decks in Technology

Transcript

  1. Death to Icon Fonts
    @ninjanails!
    LWS, June 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

    View Slide

  6. Flatulent clams
    Fraudulent claims

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  10. bp

    View Slide

  11. bp

    View Slide

  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

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. But all too often I see:

    View Slide

  17. Let’s pick on GitHub…

    View Slide

  18. Let’s pick on GitHub…

    View Slide

  19. Let’s pick on GitHub…

    View Slide

  20. View Slide

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

    View Slide

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

    View Slide

  23. Screen Readers

    View Slide

  24. Favourite
    How would a screen reader read…

    View Slide

  25. Favourite
    “Favourite”

    View Slide

  26. Favourite
    “Black Star Favourite” or
    “Star Favourite”

    View Slide

  27. Favourite
    “Unpronounceable Favourite”

    View Slide

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

    View Slide

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

    View Slide

  30. Opera Mini

    View Slide

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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

  35. https://goo.gl/EpsOu8

    View Slide

  36. View Slide

  37. View Slide

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

    View Slide

  39. Why do we use Icon
    Fonts?

    View Slide

  40. Does everything a
    normal font can!

    View Slide

  41. a
    a a
    ! ! !
    They’re scalable

    View Slide

  42. a
    a a
    ! ! !
    They can be styled

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

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

    View Slide

  56. Right way of doing it

    View Slide

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

    View Slide

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

    View Slide

  59. Context!

    View Slide

  60. Menu

    View Slide

  61. Menu

    View Slide

  62. View Slide

  63. Menu

    View Slide

  64. View Slide

  65. Menu
    Menu

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide