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
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
360
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
520
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
What makes a great Director?
_limex_
0
320
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
170
「UXとUIの違い」v2
shirasu3
0
250
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
180
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.8k
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
530
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
660
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Statistics for Hackers
jakevdp
799
220k
Practical Orchestrator
shlominoach
190
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Typedesign – Prime Four
hannesfritz
42
2.8k
Embracing the Ebb and Flow
colly
88
4.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Building Adaptive Systems
keathley
44
2.8k
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