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

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. 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
  2. bp

  3. bp

  4. 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
  5. “… We don’t download fonts; icons are what SVG is

    for.” Bruce Lawson, Opera https://www.flickr.com/photos/zeldman/14064254462/
  6. “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/
  7. Opera Mini has 250M+ users (And then there’s Nokia Xpress,

    Blackberry 4 & 5, Android 2.1, Windows 7)
  8. <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>
  9. <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>
  10. <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
  11. <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
  12. .star { background: url(star.svg); display: block; width: 83px; height: 83px;

    background-size: 83px 83px; } CSS background image
  13. “Icon font perf in Chrome is ~5x SVG atm” Addy

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