CSS3 : Icon Fonts

36
Martin Charpentier and Thibaut Baillet CSS3 : ICON FONTS

description

Dive into the creative process of Icon Fonts, and understand how to build your own.

Transcript of CSS3 : Icon Fonts

Page 1: CSS3 : Icon Fonts

Martin Charpentier and Thibaut Baillet

CSS3 : ICON FONTS

Page 3: CSS3 : Icon Fonts

MFG Labs

www.mfglabs.com twitter: @[email protected]

Page 4: CSS3 : Icon Fonts

CREATION

Page 5: CSS3 : Icon Fonts

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

Page 6: CSS3 : Icon Fonts

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

Page 7: CSS3 : Icon Fonts

From.AI to .OTF

GLYPHS app

Page 8: CSS3 : Icon Fonts

Glyphs

Page 9: CSS3 : Icon Fonts

Copy / Paste

Page 10: CSS3 : Icon Fonts

Ascender and Descender

Page 11: CSS3 : Icon Fonts

Alignment

Page 12: CSS3 : Icon Fonts

Unicode Assignment

Page 13: CSS3 : Icon Fonts

UNICODE

Page 14: CSS3 : Icon Fonts

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

Page 15: CSS3 : Icon Fonts

Logical Assignment to Unicode

MFG Labs Icons Name Unicode

Pencil 0x1f4c5

Cloud 0x2601

Fallback

Anchor 0x2693

Page 16: CSS3 : Icon Fonts

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)

Page 18: CSS3 : Icon Fonts

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

Page 19: CSS3 : Icon Fonts

HTML5 & CSS3

Page 20: CSS3 : Icon Fonts

File Format (Compatibility)

EOT

AA

WOFF

AA

TTF

AA

Page 21: CSS3 : Icon Fonts

Mobile Compatibility

SVG

AA

TTF

AA

Page 22: CSS3 : Icon Fonts

@font-face

Page 23: CSS3 : Icon Fonts

Font Face Kit

Page 24: CSS3 : Icon Fonts

Font face Kit

Page 25: CSS3 : Icon Fonts

Generic Class

Page 26: CSS3 : Icon Fonts

ImplementationCSS

HTML

Page 27: CSS3 : Icon Fonts

Implementation

CSS

Fix IE7 & 8

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

HTML

Page 29: CSS3 : Icon Fonts

Customization

Page 30: CSS3 : Icon Fonts

Customization

Page 31: CSS3 : Icon Fonts

Retina Ready

Page 32: CSS3 : Icon Fonts

Performance

Image sprite : 650kbYslow: 82

Google Speed Score : 90

TTF Font : 11kbYslow: 88

Google Speed Score : 96

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

Page 33: CSS3 : Icon Fonts

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

http://www.fontello.com

Page 34: CSS3 : Icon Fonts

Thank You!

Front-end [email protected]@mfglabs.com

Thibaut BailletLead Designer@[email protected]

Martin Charpentier

Page 36: CSS3 : Icon Fonts