Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS3 : L'ère des "Icon Fonts"
Search
iamcharp
April 23, 2013
Design
3
120
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
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
370
オープンデータを利用して色々なものを作った話
hjmkth
1
110
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.2k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
170
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
370
CIRCULAR ECONOMY + SERVICES
jmanooch
0
120
250131_product meetup
motokoishida
0
210
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
250
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
630
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Designing Experiences People Love
moore
142
24k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing for Performance
lara
610
69k
Writing Fast Ruby
sferik
628
62k
A better future with KSS
kneath
239
17k
Done Done
chrislema
184
16k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
Martin Charpentier & Thibaut Baillet CSS3 : L'ÈRE DES "ICON
FONTS"
Front-end développeur @bailletthibaut
[email protected]
Thibaut Baillet Lead Designer @im_charp
[email protected]
Martin Charpentier
MFG Labs www.mfglabs.com twitter: @mfg_labs
[email protected]
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
[email protected]
Thibaut Baillet Lead Designer @im_charp
[email protected]
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