WEB FONT EMBEDDINGA beautiful alternative

1998

2012

BEFORE & NOW Mozilla strongly encourages the use of Web Font embedding

1996

2012

BEFORE & NOW With IE9, Microsoft entered the world of font-embedding with

W3C standards and uses it on their website

1995

2012

BEFORE & NOW Adobe will introduce Web Font embedding in Dreamweaver

CS6 and uses it on their website

SAFE WEB FONTS

@FONT-FACE SAVES THE DAY!

• CSS2 has a specification to download remote fonts.

• The following formats were introduced:

• TrueDoc (PFR)

• Embedded Open Type (EOT)

• Web Open Format (WOFF)

• Scalable Vector Graphics (SVG)

http://polaroid.com/en/products

@FONT-FACE EXAMPLES

http://womens.timberland.com/#/spotlight

@FONT-FACE EXAMPLES

http://www.newyorker.com/

@FONT-FACE EXAMPLES

THE COST OF TEXT-IMAGES

• Web Designer: 4 minutes per image

‣ Open PSD file

‣ Edit text

‣ Create a web slice

‣ Isolate backgrounds and other layers

‣ Choose proper transparency settings and file format

‣ Export to Hard Drive

THE COST OF TEXT-IMAGES

• UI Developer: 4-10 minutes per image

‣ Copy file into Application codebase or file structure

‣ Modify HTML or CSS file

‣ Adjust size settings

‣ Cross-browser test

- If it’s part of a transaction flow, it can take from 1 to 5 minutes

‣ Commit the code

IMAGE REPLACING COSTSTEST CASE

• Based on 68 text-images in English

• 4 minutes per image for the Web Designer

• 7 average minutes per image for the UI Developer

• 11 overall minutes per text-image

• 68 x 11 = 748 minutes = 12.5 hours

• That’s about 2 working days (just for changing images!)

WEB FONTS IN ACTION

• Some CTA buttons

• Headers

• Google Webfonts

IE7 Windows XP

Firefox 10 Mac OS X

WEB FONT TEST CASEMain page titles with gradient overlay

IE8 Windows XP

WEB FONT TEST CASEMain page title with sub-title

WEB FONT TEST CASECTA buttons with normal and bold versions

IE8 Windows XP

Firefox 10 OS X