Martin Charpentier and Thibaut Baillet

CSS3 : ICON FONTS

Front-end developer@bailletthibautthibaut.baillet@mfglabs.com

Thibaut Baillet

Lead Designer@im_charpmartin.charpentier@mfglabs.com

Martin Charpentier

MFG Labs

www.mfglabs.com twitter: @mfg_labscontact@mfglabs.com

CREATION

Grid, guides and shapesTo maintain a unity from an icon to another, you must compel you to stick to some rules

Shapes and MathStrict compliance with mathematic rules is not a goal. But using simple shapes allow you to build icons with harmony.

From.AI to .OTF

GLYPHS app

Glyphs

Copy / Paste

Ascender and Descender

Alignment

Unicode Assignment

UNICODE

Unicode : a standard for typeface

Thousand of unicodes dedicated to shapes and symbols(Arrows, Currency Symbols, Geometic Shapes, etc...)

Standardize the use of icons in font

Logical Assignment to Unicode

MFG Labs Icons Name Unicode

Pencil 0x1f4c5

Cloud 0x2601

Fallback

Anchor 0x2693

Private Use Area

It’s preferable to pick unicode from Private Use Area rather than using a unicode which is already assigned to a letter.

Range : E000 ... F8FF (6400 UNICODES)

www.fileformat.info

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

HTML5 & CSS3

File Format (Compatibility)

EOT

AA

WOFF

AA

TTF

AA

Mobile Compatibility

SVG

AA

TTF

AA

@font-face

Font Face Kit

Font face Kit

Generic Class

ImplementationCSS

HTML

Implementation

CSS

Fix IE7 & 8

https://gist.github.com/Thibaut-B/5383783

HTML

Customization

1x 2x 3x

Customization

Customization

Retina Ready

Performance

Image sprite : 650kbYslow: 82

Google Speed Score : 90

TTF Font : 11kbYslow: 88

Google Speed Score : 96

* source : http://goo.gl/tpOKt

http://mfglabs.github.io/mfglabs-iconset/

http://www.fontello.com

Thank You!

Front-end developer@bailletthibautthibaut.baillet@mfglabs.com

Thibaut BailletLead Designer@im_charpmartin.charpentier@mfglabs.com

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

Useful link