Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
CSS3 : L'ère des "Icon Fonts"
iamcharp
April 23, 2013
Design
3
110
CSS3 : L'ère des "Icon Fonts"
Plongez à l'interieur du processus de creation et d'utilisation d'une "Icon Font".
iamcharp
April 23, 2013
Tweet
Share
Other Decks in Design
See All in Design
antondraws
0
240
rvillarreal
0
130
lizbethvic
0
150
sansan_p_design
1
920
juanluisbravo
0
210
twashington16
0
590
ohtristanart
0
140
oakleybillions
0
260
securecat
0
170
oakleybillions
0
280
alvieave
0
170
shosira
1
270
Featured
See All Featured
lara
590
61k
jmmastey
8
530
pauljervisheath
196
15k
nonsquared
81
3.3k
geoffreycrofte
18
770
jnunemaker
PRO
40
4.5k
rocio
155
11k
holman
288
130k
tanoku
258
24k
lara
172
9.5k
sugarenia
233
830k
destraynor
223
47k
Transcript
Martin Charpentier & Thibaut Baillet CSS3 : L'ÈRE DES "ICON
FONTS"
Front-end développeur @bailletthibaut thibaut.baillet@mfglabs.com Thibaut Baillet Lead Designer @im_charp martin.charpentier@mfglabs.com
Martin Charpentier
MFG Labs www.mfglabs.com twitter: @mfg_labs contact@mfglabs.com
TECHNIQUES
Grilles guides et cercles (Pour conserver une unité d’un pictogramme
à l’autre il faut s’astreindre à respecter des règles)
Proportions et formes (Le respect strict de règles mathématiques n’est
pas indispensable. L’utilisation de formes géometriques permettent de structurer plus harmonieusement les courbes et formes qui constituent l’icône.)
Du fichier .AI au .OTF GLYPHS app
Glyphs
Copier / coller
Ascendante & descendante
Alignement
Assignement des unicodes
UNICODE
Unicode : standard pour les caractères Des milliers d’unicodes pour
les formes et symboles (Arrows, Currency Symbols, Geometic Shapes, etc...) Standardise l’utilisation d’icônes
Assignement logique d’unicode MFG Labs Icons Name Unicode Pencil 0x1f4c5
Cloud 0x2601 Fallback Anchor 0x2693
Private use area Assignement au gamme private use plutôt qu’à
des unicodes correspondant à des lettres Range : E000 ... F8FF (6400 UNICODES)
www.fileformat.info
http://www.unicode.org/charts/
HTML5 & CSS3
Les formats (compatibilités) EOT AA WOFF AA TTF AA
Compatibilités mobiles SVG AA TTF AA
@font-face
Font face Kit
Font face Kit
Class générique
Implémentation CSS HTML
Implémentation CSS Fix IE7 & 8 https://gist.github.com/Thibaut-B/5383783 HTML
Customisation 1x 2x 3x
Customisation
Customisation
Retina ready
Performance Image sprite : 650kb Yslow: 82 Google Speed Score
: 90 TTF Font : 11kb Yslow: 88 Google Speed Score : 96 * source : http://goo.gl/tpOKt
http://mfglabs.github.io/mfglabs-iconset/ http://www.fontello.com
MERCI Front-end développeur @bailletthibaut thibaut.baillet@mfglabs.com Thibaut Baillet Lead Designer @im_charp
martin.charpentier@mfglabs.com Martin Charpentier
http://designshack.net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird/ https://github.com/blog/1135-the-making-of-octicons http://www.somerandomdude.com/2012/01/31/font-embedding-icons-the-right-way/ http://www.codestyle.org/css/at-font-face/StandardUnicodeIconsWebFonts.shtml http://www.fileformat.info/info/unicode/char/a.htm Liens utiles
None