Death to Icon Fonts - Seren Davies - Codemotion Amsterdam 2016

Death to Icon Fonts@ninjanailsCodeMotion, May 2016

https://www.flickr.com/photos/minifig/3186925111/

1 in 10 are Dyslexic

Flatulent clams

Flatulent clams

Fraudulent claims

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

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

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

bp

bp

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

But all too often I see:

Let’s pick on old GitHub…

Let’s pick on old GitHub…

Let’s pick on old GitHub…#DZY

https://www.flickr.com/photos/3059349393/3801594313/

Some users may be hidden…

People have different needs!

https://www.flickr.com/photos/oskay/265899766/https://www.flickr.com/photos/oskay/265899766/

Screen Readers

Favourite

How would a screen reader read…

Favourite

“Favourite”

Favourite

“Black Star Favourite” or “Star Favourite”

Favourite

“Unpronounceable Favourite”

http://unicode.johnholtripley.co.uk

https://www.flickr.com/photos/nouqraz/308342941/

Are we forgetting some people?

Opera Mini

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

Bruce Lawson, Opera

https://www.flickr.com/photos/zeldman/14064254462/

“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/

Opera Mini has 250M+ users

(And then there’s Nokia Xpress, Blackberry 4 & 5, Android 2.1, Windows 7)

https://www.flickr.com/photos/subharnab/2721507697/

And then there’s you…

https://goo.gl/EpsOu8

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

Why do we use Icon Fonts?

Does everything a normal font can!

a a aa a a

They’re scalable

a a aa a a

They can be styled

https://www.flickr.com/photos/a_funk/3482647938/

Reduces number of HTTP requests

https://www.flickr.com/photos/dajdavies/9479980440/in/photostream/

Is there a better alternative?

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

SVG

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

Accessibility

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/

1999/xlink" width="200" height="200" aria-labelledby=“title desc" viewBox="0 0 32 32">

<title id="title">Rating star</title>

<desc id="desc">A white star with a black border.</desc>

<path fill="#444" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056

1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16

23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807

1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>

</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/

1999/xlink" width="200" height="200" aria-labelledby=“title desc" viewBox="0 0 32 32">

<title id="title">Rating star</title>

<desc id="desc">A white star with a black border.</desc>

<path fill="#444" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056

1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16

23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807

1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>

</svg>

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

Scalable

Multi coloured!

By Peepo (Own work) [Public domain], via Wikimedia Commons

#DZY

Can be animated

http://codepen.io/kyleHenwood/full/Alayb/

Retina

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

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

<img src="smiley.svg" alt="Smiley face" role="image">

<img>

<img src="smiley.svg" alt="Smiley face" role="image">

<img>

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

<svg>

<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 - defining

Icon System - using

<svg class="inline-svg icon-home"><use xlink:href="#svg-earth"></use>

</svg>

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

css background

Right way of doing it

Supported in modern browsers

http://caniuse.com/#feat=svg

“Icon font perf in Chrome is ~5x SVG atm”Addy Osmani, Google

https://www.flickr.com/photos/see_also/15049247418/

Icon Fonts vs SVG

Remember GitHub

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

Context!

Menu

Menu

Menu

Menu

Menu

Menu

http://i2.cdnds.net/12/30/618x377/showbiz_opening_ceremony_4.jpg

So why don’t we build it this way?

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

@ninjanails serendavies.me ninjanails.com

https://www.flickr.com/photos/jenosaur/4051305996/