Webfonts: The Hype about Type
Upcoming SlideShare
Loading in...5
×
 

Webfonts: The Hype about Type

on

  • 3,782 views

So far designers were limited to the fonts available on the user's machines. All of a sudden New possibilities seem to open up.

So far designers were limited to the fonts available on the user's machines. All of a sudden New possibilities seem to open up.

Statistics

Views

Total Views
3,782
Views on SlideShare
3,745
Embed Views
37

Actions

Likes
4
Downloads
28
Comments
0

3 Embeds 37

http://www.slideee.com 22
http://www.slideshare.net 8
http://blog.liip.ch 7

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webfonts: The Hype about Type Webfonts: The Hype about Type Presentation Transcript

  • Webfonts The Hype about Type April 6th 2010 1 Memi Beltrame: Webfonts – The Hype about Type
  • How can designers make use of the rich variety of fonts on websites? 2 Memi Beltrame: Webfonts – The Hype about Type
  • So far designers were limited to the fonts available on the user's machines. 3 Memi Beltrame: Webfonts – The Hype about Type
  • This means only fonts distributed with the OS. font-family: Georgia, "Times New Roman", serif; 4 Memi Beltrame: Webfonts – The Hype about Type
  • Helvetica vs. Arial on Macintosh on Windows 5 Memi Beltrame: Webfonts – The Hype about Type
  • Alternative: Download the font from the server! 6 Memi Beltrame: Webfonts – The Hype about Type
  • Alternative: Download the font from the server! CSS 2 @font-face { src: local("Alabama Italic"), url(http://fonts.org/alabama-italic) format("truetype"); } 7 Memi Beltrame: Webfonts – The Hype about Type
  • Alternative: Download the font from server! CSS 2 Dropped in CSS 2.1 @font-face { src: local("Alabama Italic"), url(http://fonts.org/alabama-italic) format("truetype"); } 8 Memi Beltrame: Webfonts – The Hype about Type
  • 2 Problems • DRM • Browsers 9 Memi Beltrame: Webfonts – The Hype about Type
  • DRM 10 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Designers rely on good fonts 11 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Designers rely on good fonts These have variations & dîàçrìtïcs 12 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Designers rely on good fonts These have variations & dîàçrìtïcs Good fonts come from type foundries 13 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Designers rely on good fonts These have variations & dîàçrìtïcs Good fonts come from type foundries These want money for their use 14 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Designers rely on good fonts These have variations & dîàçrìtïcs Good fonts come from type foundries These want money for their use DRM 15 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Solutions 1. Web Font Services 16 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Solutions 1. Web Font Services Foundries: Linotype Monotype 17 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Solutions 1. Web Font Services Font-Service: Foundries: Licence to Typekit Linotype Typotheque Monotype Fontdeck 18 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Solutions 1. Web Font Services Font-Service: Foundries: Licence to Typekit Linotype Typotheque Monotype Fontdeck Licence to you Domain 1 Domain 2 19 Memi Beltrame: Webfonts – The Hype about Type
  • Typekit - Sign up 20 Memi Beltrame: Webfonts – The Hype about Type
  • Typekit - Sign up - Choose type of account 21 Memi Beltrame: Webfonts – The Hype about Type
  • Typekit - Sign up - Choose type of account - Choose font(s) 22 Memi Beltrame: Webfonts – The Hype about Type
  • Typekit - Sign up - Choose type of account - Choose font(s) Unique identifer - Embed markup <script type="text/javascript" src="http://use.typekit.com/cyq6gmy.js"> </script> <script type="text/javascript"> try{Typekit.load();}catch(e){} </script> 23 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Solutions 2. Open Fonts 24 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Solutions 2. Open Fonts http://openfontlibrary.org/ 25 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Solutions 2. Open Fonts Open Font Library: - Ensures open licencing (public domain, SIL Open Font Licence) 26 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Solutions 2. Open Fonts Open Font Library: - Ensures open licencing (public domain, SIL Open Font Licence) - Ensures a certain standard in fonts 27 Memi Beltrame: Webfonts – The Hype about Type
  • DRM Solutions 2. Open Fonts Open Font Library: - Ensures open licencing (public domain, SIL Open Font Licence) - Ensures a certain standard in fonts Is no guarantee for professional fonts 28 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers 29 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers Internet Explorer only understands EOT 30 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers Internet Explorer only understands EOT No TTF, OTF, SVG, WOFF (new!) 31 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers Internet Explorer only understands EOT No TTF, OTF, SVG, WOFF (new!) @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype'); } YES IT'S A HACK! 32 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers Formats for Non-IE Browsers 33 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers The Format Names: SVG – Scalable Vector Graphics TTF - True Type Fonts OTF – Open Type Format WOFF - Web Open Font Format 34 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers For an in-depth analysis cf http://liip.to/fontEngineComparison 35 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers Problems with ttf: - Mozilla support is new - Chrome disables it by default 36 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers Problems with otf: - Mozilla support is new - No Chrome support - doesn't render nicely on Windows 37 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers Problems with svg: - Mozilla does not support it, at least not very well 38 Memi Beltrame: Webfonts – The Hype about Type
  • Browsers SVG : W3C recommendation Implementation: Source: http://de.wikipedia.org/wiki/Svg 39 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF 40 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly 41 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF 42 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9 43 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9 - is backed by type foundries 44 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF Includes optional metadata 45 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF Includes optional metadata Vendors can tag their fonts with information related to font usage. 46 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF Includes optional metadata Vendors can tag their fonts with information related to font usage. Font usage can be monitored but not completely restricted 47 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF Firefox: - default same-origin restriction 48 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF Firefox: - default same-origin restriction - only loads WOFF from the same domain 49 Memi Beltrame: Webfonts – The Hype about Type
  • WOFF Firefox: - default same-origin restriction - only loads WOFF from the same domain - makes font-vendors happy! 50 Memi Beltrame: Webfonts – The Hype about Type
  • So why this sudden font hype? 51 Memi Beltrame: Webfonts – The Hype about Type
  • So why this sudden font hype? Implementation of the @font-face directive gained signifcant speed. 52 Memi Beltrame: Webfonts – The Hype about Type
  • So why this sudden font hype? Font-services make designers and type foundries happy 53 Memi Beltrame: Webfonts – The Hype about Type
  • So why this sudden font hype? WOFF may become the new standard for fonts on the web. With Microsoft on board. 54 Memi Beltrame: Webfonts – The Hype about Type
  • Read more: http://delicious.com/plonk/webfonts 55 Memi Beltrame: Webfonts – The Hype about Type
  • Thank you! memibeltrame.ch twitter.com/bratwurstkomet More presentations: slideshare.net/memibeltrame liip.ch 56 Memi Beltrame: Webfonts – The Hype about Type