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

Death to Icon Fonts

Avatar for SerenD SerenD
September 26, 2015
Technology
1
870

Death to Icon Fonts

My Epic FEL talk from 26th September, where I cover some of the problems icon fonts pose for dyslexics
Avatar for SerenD

SerenD

September 26, 2015
Tweet

More Decks by SerenD

See All by SerenD
Accessibility is more than just supporting screenreaders
Avatar for SerenD ninjanails
1
84
Accessibility is more than just supporting screenreaders
Avatar for SerenD ninjanails
0
170
Accessibility is more than just supporting screenreaders
Avatar for SerenD ninjanails
0
290
Accessibility is more than just supporting screenreaders
Avatar for SerenD ninjanails
0
700
Accessibility is more than just supporting screenreaders
Avatar for SerenD ninjanails
0
170
Accessibility is more than just supporting screenreaders
Avatar for SerenD ninjanails
1
490
web building dyslexic a friendly
Avatar for SerenD ninjanails
3
370
Death to Icon Fonts
Avatar for SerenD ninjanails
5
720
Death to Icon Fonts
Avatar for SerenD ninjanails
107
65k

Other Decks in Technology

See All in Technology
テストコードにはテストの意図を込めよう(2025年版) #retechtalk / Put the intent of the test 2025
Avatar for nihonbuson nihonbuson
PRO
14
2.3k
Lakehouse в Лемана Тех. От архитектуры до оптимизации
Avatar for Elena Meremyanina emeremyanina1234
0
510
転職したらMCPサーバーだった件
Avatar for nwiizo nwiizo
14
10k
The PyArrow revolution in Pandas
Avatar for Reuven M. Lerner reuven
0
130
Web Streams APIの基本と実践、TypeScriptでの活用法 / TSKaigi 2025 Web Streams API
Avatar for tasshi tasshi
4
400
WindowsでGenesisに挑戦した話
Avatar for Minoru Natsutani natsutan
0
130
NAB Show 2025 動画技術関連レポート / NAB Show 2025 Report
Avatar for CyberAgent cyberagentdevelopers
PRO
0
180
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
4.4k
Microsoft Fabric のライセンスについて
Avatar for Ryoma Nagata ryomaru0825
2
3.5k
勘違いから始まったProxmox on ProxmoxでGPUパススルー【JPmoxs勉強会#7】/JPmoxs7_GPU_Passthrough_on_Proxmox_on_Proxmox-A_Journey_That_Started_with_a_Misunderstanding
Avatar for 月見 tsukimi_site
0
120
GrafanaをClaude DesktopからMCPで触ってみた
Avatar for 濱田孝治 hamadakoji
0
1.3k
AWS_MCP_Servers入門.pdf
Avatar for naotoiso naotoiso
0
210

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
180
53k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
21k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
38
1.8k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.3k

Transcript

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

  2. None

  3. 1 in 10 are Dyslexic

  4. Flatulent clams

  5. Flatulent clams Fraudulent claims

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

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

  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

  9. bp

  10. bp

  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
  12. None
  13. None
  14. None

  15. But all too often I see:

  16. Let’s pick on GitHub…

  17. Let’s pick on GitHub…

  18. Let’s pick on GitHub…

  19. None

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

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

  22. Screen Readers

  23. Favourite How would a screen reader read…

  24. Favourite “Favourite”

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

  26. Favourite “Unpronounceable Favourite”

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

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

  29. Opera Mini

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

    for.” Bruce Lawson, Opera https://www.flickr.com/photos/zeldman/14064254462/

  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/

  32. Opera Mini has 250M+ users (And then there’s Nokia Xpress,

    Blackberry 4 & 5, Android 2.1, Windows 7)

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

  34. https://goo.gl/EpsOu8

  35. None
  36. None

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

  38. None
  39. None

  40. Why do we use Icon Fonts?

  41. Does everything a normal font can!

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

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

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

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

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

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

  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>

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

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

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

    Commons

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

  53. None
  54. None
  55. None

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

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

  58. <img src="smiley.svg" alt="Smiley face"> Image tag

  59. <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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"> <polygon fill="#FFFFFF" stroke="#000000" stroke- 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> </body> SVG tag

  60. <svg> <defs> <symbol id="icon-home" viewBox="0 0 1024 1024"> <title>home</title> <path

    class="path1" d="M1024 590.444l-512-397.426-512 397.428v-162.038l512-397.426 512 397.428zM896 576v384h-256v-256h-256v256h-256v-384l384-288z"></path> </symbol> <symbol id="icon-newspaper" viewBox="0 0 1024 1024"> <title>newspaper</title> <path class="path1" d="M896 256v-128h-896v704c0 35.346 28.654 64 64 64h864c53.022 0 96-42.978 96-96v-544h-128zM832 832h-768v-640h768v640zM128 320h640v64h-640zM512 448h256v64h-256zM512 576h256v64h-256zM512 704h192v64h-192zM128 448h320v320h-320z"></path> </symbol> </defs> </svg> Icon system

  61. .star { background: url(star.svg); display: block; width: 83px; height: 83px;

    background-size: 83px 83px; } CSS background image

  62. Right way of doing it

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

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

    Osmani, Google https://www.flickr.com/photos/see_also/15049247418/

  65. Icon Fonts vs SVG

  66. None
  67. None

  68. Context!

  69. Menu

  70. Menu

  71. None

  72. Menu

  73. None

  74. Menu Menu Menu

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

  76. None
  77. None
  78. None
  79. None

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

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