Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3 : L'ère des "Icon Fonts"

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for iamcharp iamcharp
April 23, 2013
Design
130
3

CSS3 : L'ère des "Icon Fonts"

Plongez à l'interieur du processus de creation et d'utilisation d'une "Icon Font".

Avatar for iamcharp

iamcharp

April 23, 2013

Other Decks in Design

See All in Design
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.8k
hicard_credential_202601
Avatar for hicard hicard
0
220
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
380
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
340
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
290
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.2k
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
410
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1.1M
つくり方を変えていく | change-how-we-build
Avatar for mottox2 mottox2
2
1.2k
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
4
3k
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
360
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
530

Featured

See All Featured
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
580
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
780
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
320
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
730
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
120
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
10
37k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
6
580
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k

Transcript

  1. Martin Charpentier & Thibaut Baillet CSS3 : L'ÈRE DES "ICON

    FONTS"

  2. Front-end développeur @bailletthibaut [email protected] Thibaut Baillet Lead Designer @im_charp [email protected]

    Martin Charpentier

  3. MFG Labs www.mfglabs.com twitter: @mfg_labs [email protected]

  4. TECHNIQUES

  5. Grilles guides et cercles (Pour conserver une unité d’un pictogramme

    à l’autre il faut s’astreindre à respecter des règles)

  6. 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.)

  7. Du fichier .AI au .OTF GLYPHS app

  8. Glyphs

  9. Copier / coller

  10. Ascendante & descendante

  11. Alignement

  12. Assignement des unicodes

  13. UNICODE

  14. 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

  15. Assignement logique d’unicode MFG Labs Icons Name Unicode Pencil 0x1f4c5

    Cloud 0x2601 Fallback Anchor 0x2693

  16. Private use area Assignement au gamme private use plutôt qu’à

    des unicodes correspondant à des lettres Range : E000 ... F8FF (6400 UNICODES)

  17. www.fileformat.info

  18. http://www.unicode.org/charts/

  19. HTML5 & CSS3

  20. Les formats (compatibilités) EOT AA WOFF AA TTF AA

  21. Compatibilités mobiles SVG AA TTF AA

  22. @font-face

  23. Font face Kit

  24. Font face Kit

  25. Class générique

  26. Implémentation CSS HTML

  27. Implémentation CSS Fix IE7 & 8 https://gist.github.com/Thibaut-B/5383783 HTML

  28. Customisation 1x 2x 3x

  29. Customisation

  30. Customisation

  31. Retina ready

  32. Performance Image sprite : 650kb Yslow: 82 Google Speed Score

    : 90 TTF Font : 11kb Yslow: 88 Google Speed Score : 96 * source : http://goo.gl/tpOKt

  33. http://mfglabs.github.io/mfglabs-iconset/ http://www.fontello.com

  34. MERCI Front-end développeur @bailletthibaut [email protected] Thibaut Baillet Lead Designer @im_charp

    [email protected] Martin Charpentier

  35. 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

  36. None