Upload
juan-medina
View
440
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Web Font Embedding is a beautiful alternative for presenting text in websites. Since most major browsers are now supporting this feature, designers and developers no longer have to rely on images that replaced text on the web.
Citation preview
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