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
Sociotechnical design for software and human systems
xinyao
2
480
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
570
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.8k
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
270
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
360
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
Resolving text accessibility dilemmas in UIs
romanshamin
0
130
不可分の民藝から可分の工業産業へ
creatorqsf
1
340
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
220
Featured
See All Featured
It's Worth the Effort
3n
180
27k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Ruby is Unlike a Banana
tanoku
96
10k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Atom: Resistance is Futile
akmur
258
25k
We Have a Design System, Now What?
morganepeng
42
6.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
57k
Embracing the Ebb and Flow
colly
79
4.1k
A Tale of Four Properties
chriscoyier
150
22k
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