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