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

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 full-size slide

  2. 1 in 10 are Dyslexic

    View full-size slide

  3. Flatulent clams

    View full-size slide

  4. Flatulent clams

    View full-size slide

  5. Flatulent clams
    Fraudulent claims

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

  10. But all too often I see:

    View full-size slide

  11. Let’s pick on GitHub…

    View full-size slide

  12. Let’s pick on GitHub…

    View full-size slide

  13. Let’s pick on GitHub…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Screen Readers

    View full-size slide

  17. Favourite
    How would a screen reader read…

    View full-size slide

  18. Favourite
    “Favourite”

    View full-size slide

  19. Favourite
    “Black Star Favourite” or
    “Star Favourite”

    View full-size slide

  20. Favourite
    “Unpronounceable Favourite”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. “… 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

  24. “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

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

    View full-size slide

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

    View full-size slide

  27. https://goo.gl/EpsOu8

    View full-size slide

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

    View full-size slide

  29. Why do we use Icon
    Fonts?

    View full-size slide

  30. Does everything a
    normal font can!

    View full-size slide

  31. a
    a a
    ! ! !
    They’re scalable

    View full-size slide

  32. a
    a a
    ! ! !
    They can be styled

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. Right way of doing it

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide