Martin Charpentier & Thibaut BailletCSS3 : LÈRE DES "ICON FONTS"
Front-end développeur@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentier@mfg...
MFG Labswww.mfglabs.comtwitter: @mfg_labscontact@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éometriq...
Du fichier .AI au .OTFGLYPHS app
Glyphs
Copier / coller
Ascendante & descendante
Alignement
Assignement des unicodes
UNICODE
Unicode : standard pour les caractèresDes milliers d’unicodes pour lesformes et symboles(Arrows, Currency Symbols, Geometi...
Assignement logique d’unicodeMFG Labs Icons Name UnicodePencil 0x1f4c5Cloud 0x2601FallbackAnchor 0x2693
Private use areaAssignement au gamme private use plutôtqu’à des unicodes correspondant à des lettresRange : E000 ... F8FF ...
www.fileformat.info
http://www.unicode.org/charts/
HTML5 & CSS3
Les formats (compatibilités)EOTAAWOFFAATTFAA
Compatibilités mobilesSVGAATTFAA
@font-face
Font face Kit
Font face Kit
Class générique
ImplémentationCSSHTML
ImplémentationCSSFix IE7 & 8https://gist.github.com/Thibaut-B/5383783HTML
Customisation1x 2x 3x
Customisation
Customisation
Customisation
Customisation
Customisation
Retina ready
PerformanceImage sprite : 650kbYslow: 82Google Speed Score : 90TTF Font : 11kbYslow: 88Google Speed Score : 96* source : h...
http://mfglabs.github.io/mfglabs-iconset/http://www.fontello.com
MERCIFront-end développeur@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentie...
http://designshack.net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird/https://github....
Keynote font-icon
Upcoming SlideShare
Loading in …5
×

Keynote font-icon

468 views
334 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
468
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Keynote font-icon

  1. 1. Martin Charpentier & Thibaut BailletCSS3 : LÈRE DES "ICON FONTS"
  2. 2. Front-end développeur@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentier@mfglabs.comMartin Charpentier
  3. 3. MFG Labswww.mfglabs.comtwitter: @mfg_labscontact@mfglabs.com
  4. 4. TECHNIQUES
  5. 5. Grilles guides et cercles(Pour conserver une unité d’un pictogramme à l’autre il faut s’astreindre à respecter des règles)
  6. 6. Proportions et formes(Le respect strict de règles mathématiques n’est pas indispensable. L’utilisation de formes géometriquespermettent de structurer plus harmonieusement les courbes et formes qui constituent l’icône.)
  7. 7. Du fichier .AI au .OTFGLYPHS app
  8. 8. Glyphs
  9. 9. Copier / coller
  10. 10. Ascendante & descendante
  11. 11. Alignement
  12. 12. Assignement des unicodes
  13. 13. UNICODE
  14. 14. Unicode : standard pour les caractèresDes milliers d’unicodes pour lesformes et symboles(Arrows, Currency Symbols, Geometic Shapes, etc...)Standardise l’utilisation d’icônes
  15. 15. Assignement logique d’unicodeMFG Labs Icons Name UnicodePencil 0x1f4c5Cloud 0x2601FallbackAnchor 0x2693
  16. 16. Private use areaAssignement au gamme private use plutôtqu’à des unicodes correspondant à des lettresRange : E000 ... F8FF (6400 UNICODES)
  17. 17. www.fileformat.info
  18. 18. http://www.unicode.org/charts/
  19. 19. HTML5 & CSS3
  20. 20. Les formats (compatibilités)EOTAAWOFFAATTFAA
  21. 21. Compatibilités mobilesSVGAATTFAA
  22. 22. @font-face
  23. 23. Font face Kit
  24. 24. Font face Kit
  25. 25. Class générique
  26. 26. ImplémentationCSSHTML
  27. 27. ImplémentationCSSFix IE7 & 8https://gist.github.com/Thibaut-B/5383783HTML
  28. 28. Customisation1x 2x 3x
  29. 29. Customisation
  30. 30. Customisation
  31. 31. Customisation
  32. 32. Customisation
  33. 33. Customisation
  34. 34. Retina ready
  35. 35. PerformanceImage sprite : 650kbYslow: 82Google Speed Score : 90TTF Font : 11kbYslow: 88Google Speed Score : 96* source : http://goo.gl/tpOKt
  36. 36. http://mfglabs.github.io/mfglabs-iconset/http://www.fontello.com
  37. 37. MERCIFront-end développeur@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentier@mfglabs.comMartin Charpentier
  38. 38. http://designshack.net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird/https://github.com/blog/1135-the-making-of-octiconshttp://www.somerandomdude.com/2012/01/31/font-embedding-icons-the-right-way/http://www.codestyle.org/css/at-font-face/StandardUnicodeIconsWebFonts.shtmlhttp://www.fileformat.info/info/unicode/char/a.htmLiens utiles

×