Death to Icon Fonts

Death to Icon Fonts @ninjanails Epic FEL, Sept 2015 https://www.ﬂickr.com/photos/miniﬁg/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.ﬂickr.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

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

But all too often I see:

Let’s pick on GitHub…

https://www.ﬂickr.com/photos/3059349393/3801594313/ Some users may be hidden…

People have different needs! https://www.ﬂickr.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.ﬂickr.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.ﬂickr.com/photos/zeldman/14064254462/

“This doesn’t just beneﬁt 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.ﬂickr.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 a a a a They’re scalable

a a a a a a They can be styled

https://www.ﬂickr.com/photos/a_funk/3482647938/ Reduces number of HTTP requests

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

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

https://www.ﬂickr.com/photos/anjan58/7272291392/ Accessibility

https://www.ﬁlamentgroup.com/lab/grumpicon-workﬂow.html Scalable

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

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

Retina https://www.ﬂickr.com/photos/benm_at/8857900520/

https://www.ﬂickr.com/photos/spackletoe/90811910/

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

<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

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

Right way of doing it

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

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

Icon Fonts vs SVG

Context!

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.ﬂickr.com/photos/kitty-kat/6049220331/

@ninjanails serendavies.me ninjanails.com https://www.ﬂickr.com/photos/jenosaur/4051305996/

Death to Icon Fonts

Death to Icon Fonts

More Decks by SerenD

Other Decks in Technology

Featured

Transcript