Slide 1
Slide 1 text
Death to Icon Fonts
@ninjanails
CodeMotion, May 2016
https://www.flickr.com/photos/minifig/3186925111/
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
1 in 10 are Dyslexic
Slide 4
Slide 4 text
Flatulent clams
Slide 5
Slide 5 text
Flatulent clams
Fraudulent claims
Slide 6
Slide 6 text
http://www.cafepress.co.uk/mf/94227980/keep-clam-and-stop-dyslexia_mugs
Slide 7
Slide 7 text
https://www.flickr.com/photos/jonathancohen/4084485753/
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
bp
Slide 10
Slide 10 text
bp
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
But all too often I see:
Slide 15
Slide 15 text
Let’s pick on old GitHub…
Slide 16
Slide 16 text
Let’s pick on old GitHub…
Slide 17
Slide 17 text
Let’s pick on old GitHub… #DZY
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
https://www.flickr.com/photos/3059349393/3801594313/
Some users may be hidden…
Slide 20
Slide 20 text
People have different needs!
https://www.flickr.com/photos/oskay/265899766/
https://www.flickr.com/photos/oskay/265899766/
Slide 21
Slide 21 text
Screen Readers
Slide 22
Slide 22 text
Favourite
How would a screen reader read…
Slide 23
Slide 23 text
Favourite
“Favourite”
Slide 24
Slide 24 text
Favourite
“Black Star Favourite” or
“Star Favourite”
Slide 25
Slide 25 text
Favourite
“Unpronounceable Favourite”
Slide 26
Slide 26 text
http://unicode.johnholtripley.co.uk
Slide 27
Slide 27 text
https://www.flickr.com/photos/nouqraz/308342941/
Are we forgetting some people?
Slide 28
Slide 28 text
Opera Mini
Slide 29
Slide 29 text
“… We don’t download fonts;
icons are what SVG is for.”
Bruce Lawson, Opera
https://www.flickr.com/photos/zeldman/14064254462/
Slide 30
Slide 30 text
“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/
Slide 31
Slide 31 text
Opera Mini has 250M+ users
(And then there’s Nokia Xpress, Blackberry 4 & 5,
Android 2.1, Windows 7)
Slide 32
Slide 32 text
https://www.flickr.com/photos/subharnab/2721507697/
And then there’s you…
Slide 33
Slide 33 text
https://goo.gl/EpsOu8
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
https://speakerdeck.com/zachleat/remodeling-at-font-face
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Why do we use Icon
Fonts?
Slide 40
Slide 40 text
Does everything a
normal font can!
Slide 41
Slide 41 text
a
a a
a a a
They’re scalable
Slide 42
Slide 42 text
a
a a
a a a
They can be styled
Slide 43
Slide 43 text
https://www.flickr.com/photos/a_funk/3482647938/
Reduces number of HTTP requests
Slide 44
Slide 44 text
https://www.flickr.com/photos/dajdavies/9479980440/in/photostream/
Is there a better alternative?
Slide 45
Slide 45 text
https://www.google.com/design/icons/
SVG
Slide 46
Slide 46 text
https://www.flickr.com/photos/anjan58/7272291392/
Accessibility
Slide 47
Slide 47 text
Rating star
A white star with a black border.
Slide 48
Slide 48 text
Rating star
A white star with a black border.
Slide 49
Slide 49 text
https://www.filamentgroup.com/lab/grumpicon-workflow.html
Scalable
Slide 50
Slide 50 text
Multi coloured!
By Peepo (Own work) [Public domain], via Wikimedia Commons
#DZY
Slide 51
Slide 51 text
Can be animated
http://codepen.io/kyleHenwood/full/Alayb/
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Retina
https://www.flickr.com/photos/benm_at/8857900520/
Slide 55
Slide 55 text
https://www.flickr.com/photos/spackletoe/90811910/
Slide 56
Slide 56 text
Slide 57
Slide 57 text
Slide 58
Slide 58 text
Slide 59
Slide 59 text
home
newspaper
Icon System - defining
Slide 60
Slide 60 text
Icon System - using
Slide 61
Slide 61 text
.star {
background: url(star.svg);
display: block;
width: 83px;
height: 83px;
background-size: 83px 83px;
}
css background
Slide 62
Slide 62 text
Right way of doing it
Slide 63
Slide 63 text
Supported in modern browsers
http://caniuse.com/#feat=svg
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
“Icon font perf in Chrome is ~5x SVG atm”
Addy Osmani, Google
https://www.flickr.com/photos/see_also/15049247418/
Slide 66
Slide 66 text
Icon Fonts vs SVG
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
Remember GitHub
Slide 70
Slide 70 text
https://github.com/blog/2112-delivering-octicons-with-svg
Slide 71
Slide 71 text
Context!
Slide 72
Slide 72 text
Menu
Slide 73
Slide 73 text
Menu
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Menu
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
Menu
Menu
Menu
Slide 78
Slide 78 text
http://i2.cdnds.net/12/30/618x377/showbiz_opening_ceremony_4.jpg
So why don’t we build it this way?
Slide 79
Slide 79 text
https://www.flickr.com/photos/kitty-kat/6049220331/
Slide 80
Slide 80 text
@ninjanails
serendavies.me
ninjanails.com
https://www.flickr.com/photos/jenosaur/4051305996/