Web Font Services Fort Collins Internet Professionals March 24, 2011
Same old web-safe fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
The problem <ul><li>We’ve been relying on the fonts present on the  computer used to view the website </li></ul>
Where we’re headed <ul><li>All of the text on the following page is HTML text (no images of text) </li></ul>
Where we’re headed <ul><li>All of the text on the following page is HTML text (no images of text) </li></ul>
1280 x 800 1280 x 800 Flickr: goodrob13
In the past, to use creative fonts <ul><li>Image replacement – typography as a graphic </li></ul>
In the past, to use other fonts <ul><li>Image replacement – typography as a graphic </li></ul>
In the past, to use creative fonts <ul><li>Image replacement – typography as a graphic </li></ul><ul><li>sIFR &quot;Scalab...
What we want: <ul><li>Font embedding </li></ul><ul><ul><li>Serving the desired fonts from a web server </li></ul></ul><ul>...
Did you know? <ul><li>Font embedding has been around since…? </li></ul>
Did you know? <ul><li>Font embedding has been around since 1997 !? </li></ul>
Did you know? <ul><li>Font embedding has been around since 1997 !? </li></ul><ul><li>Guess which browser was first? </li><...
1280 x 800 Photo: Steve Rhodes 16 : 9 Photo: Steve Rhodes Flickr: iFranky
Browser inconsistency <ul><li>Has been a big problem </li></ul>
CSS basic @font-face syntax <ul><li>@font-face {  </li></ul><ul><li>font-family: ‘Arvo’;  </li></ul><ul><li>src: url(‘Arvo...
Convergent solution:  CSS3 @font-face <ul><li>Browser support </li></ul><ul><ul><li>IE – since IE4 </li></ul></ul><ul><ul>...
General technique <ul><li>Licensing </li></ul><ul><ul><li>Get your fonts from a web font services provider that has taken ...
CSS basic @font-face syntax <ul><li>@font-face {  </li></ul><ul><li>font-family: ‘Arvo’;  </li></ul><ul><li>src: url(‘Arvo...
Font file types <ul><li>‘ eot’ </li></ul><ul><ul><li>embedded open type (IE proprietary) </li></ul></ul><ul><li>‘ woff’ </...
@font-face Cross-Browser Syntax <ul><li>@font-face {  </li></ul><ul><li>font-family: ‘Arvo’;  </li></ul><ul><li>src: url(‘...
Web font services & providers <ul><li>Font Squirrel (free) </li></ul><ul><li>Font-Face </li></ul><ul><li>Fontdeck </li></u...
Examples <ul><li>FontSquirrel </li></ul><ul><ul><li>Fontsquirrel.com </li></ul></ul><ul><ul><li>About 650 font families </...
FontSquirrel <ul><li>Lorem </li></ul><ul><ul><li>Ipsum </li></ul></ul>
FontSquirrel <ul><li>Free </li></ul><ul><li>Click “@font-face kit” to download kit </li></ul><ul><li>Copy entire folder to...
Testing <ul><li>Lorem </li></ul><ul><ul><li>Ipsum </li></ul></ul>
Google Font API <ul><li>Free </li></ul><ul><li>Fonts are hosted and served from Google </li></ul><ul><ul><li>not on  your ...
Typekit <ul><li>Free for two fonts on one site </li></ul><ul><li>Low cost for more </li></ul><ul><li>Signup is quick </li>...
Typekit <ul><li>Free for two fonts on one site </li></ul><ul><li>Paid plans start at $24.99 per year (2 sites, 5 fonts per...
Testing <ul><li>Lorem </li></ul><ul><ul><li>Ipsum </li></ul></ul>
WebINK <ul><li>Fonts are hosted and served from WebInk </li></ul><ul><ul><li>not on  your web server </li></ul></ul><ul><l...
Testing <ul><li>Lorem </li></ul><ul><ul><li>Ipsum </li></ul></ul>
Technical issues <ul><li>Safari, Chrome, Internet Explorer </li></ul><ul><ul><li>leave a blank space in place of the style...
Technical solutions <ul><li>WebFont Loader: JavaScript library provides control over font loading. </li></ul><ul><li>Co-de...
Rules for Good Type <ul><li>Choose a good typeface </li></ul><ul><li>Don't use too many </li></ul><ul><li>Have a clear hie...
Choose a good typeface <ul><li>Proper for the format, the content, the reader </li></ul><ul><li>Poor choices = hard to rea...
Don't use too many <ul><li>Try one font  </li></ul><ul><li>Maybe try 2  </li></ul><ul><li>Very few sites successfully use ...
Have a clear hierarchy <ul><li>Make more important things bigger  </li></ul><ul><li>Make less important things smaller </l...
If in doubt, read it <ul><li>Huffingtonpost.com: example of frustrating to read. Poor typeface selections </li></ul>Stephe...
Terms and tips <ul><li>Display faces – for headlines </li></ul><ul><li>Text faces – for body copy </li></ul><ul><li>Taller...
Terms and tips <ul><li>Display faces – for headlines </li></ul><ul><li>Text faces – for body copy </li></ul><ul><li>Taller...
Terms and tips <ul><li>Display faces – for headlines </li></ul><ul><li>Text faces – for body copy </li></ul><ul><li>Taller...
Advanced <ul><li>Some interesting things if you really get into this stuff </li></ul>
Type rendering: APIs (OS dependent) <ul><li>Specialized components within an OS responsible for rasterizing fonts’ vector ...
Apple vs. Microsoft: Philosophy <ul><li>Windows provide users with several antialiasing preferences from which to choose <...
Type Rendering: Browsers <ul><li>Mac: all web browsers use  </li></ul><ul><ul><li>Core Text (the  only  system text render...
Type Rendering: Browsers <ul><li>Windows: Firefox, Chrome, Safari, Opera, & IE6 </li></ul><ul><ul><li>Use system default t...
Type Rendering: Browsers <ul><li>Windows: IE7 </li></ul><ul><ul><li>Internet Explorer 7 has a preference called “Always us...
Type Rendering: Browsers <ul><li>Windows: IE8 </li></ul><ul><ul><li>Also has “Always use ClearType for HTML” preference </...
Type Rendering: Browsers <ul><li>Windows: IE9 </li></ul><ul><ul><li>IE9 bypasses OS font smoothing settings in favor of Mi...
Browser Testing (for Type) <ul><li>Any Mac browser </li></ul><ul><li>IE9 </li></ul><ul><li>IE8 with ClearType enabled </li...
Resources <ul><li>Review of 10 font embedding services: </li></ul><ul><ul><li>http://www.smashingmagazine.com/2010/10/20/r...
Resources <ul><li>Good Typekit fonts for web: </li></ul><ul><ul><li>http://www.sleepoversf.com/the-great-typekit-table/ </...
Resources – web font loader <ul><li>Good article: Gives JS handles to control flash of unstyled text (FOUT): </li></ul><ul...
Examples of web font services in use <ul><li>http://lostworldsfairs.com/ </li></ul><ul><li>http://www.abookapart.com/ </li...
Where to find me <ul><li>Twitter: @ron_z </li></ul><ul><li>[email_address] </li></ul><ul><li>codegeek.net </li></ul><ul><l...
Web Font Services Fort Collins Internet Professionals March 24, 2011
Upcoming SlideShare
Loading in...5
×

Web font services: March 2011

2,630

Published on

A presentation about webfont services and how to stop using the same old 15 web-safe fonts we've been using for two decades. Examples from four webfont providers: FontSquirrel, Google Font API, Typekit, and Extensis WebINK. Includes implementation details.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,630
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web font services: March 2011

  1. 1. Web Font Services Fort Collins Internet Professionals March 24, 2011
  2. 2. Same old web-safe fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  3. 3. The problem <ul><li>We’ve been relying on the fonts present on the computer used to view the website </li></ul>
  4. 4. Where we’re headed <ul><li>All of the text on the following page is HTML text (no images of text) </li></ul>
  5. 5. Where we’re headed <ul><li>All of the text on the following page is HTML text (no images of text) </li></ul>
  6. 6. 1280 x 800 1280 x 800 Flickr: goodrob13
  7. 7. In the past, to use creative fonts <ul><li>Image replacement – typography as a graphic </li></ul>
  8. 8. In the past, to use other fonts <ul><li>Image replacement – typography as a graphic </li></ul>
  9. 9. In the past, to use creative fonts <ul><li>Image replacement – typography as a graphic </li></ul><ul><li>sIFR &quot;Scalable Inman Flash Replacement”, </li></ul><ul><ul><li>Uses JavaScript and Flash technologies to replace web-safe text with a Flash image of the text, in your chosen typeface </li></ul></ul><ul><li>Cufón </li></ul><ul><ul><li>JavaScript image replacement technique that's a worthy alternative to sIFR. </li></ul></ul><ul><li>FLIR </li></ul><ul><ul><li>A server-side PHP script that dynamically generates images of text in the font-face of your choosing. </li></ul></ul>http://randsco.com/index.php/2009/07/04/p680
  10. 10. What we want: <ul><li>Font embedding </li></ul><ul><ul><li>Serving the desired fonts from a web server </li></ul></ul><ul><ul><li>(Not relying on fonts present on the client computer) </li></ul></ul><ul><li>A consistent experience across multiple browsers </li></ul>
  11. 11. Did you know? <ul><li>Font embedding has been around since…? </li></ul>
  12. 12. Did you know? <ul><li>Font embedding has been around since 1997 !? </li></ul>
  13. 13. Did you know? <ul><li>Font embedding has been around since 1997 !? </li></ul><ul><li>Guess which browser was first? </li></ul>
  14. 14. 1280 x 800 Photo: Steve Rhodes 16 : 9 Photo: Steve Rhodes Flickr: iFranky
  15. 15. Browser inconsistency <ul><li>Has been a big problem </li></ul>
  16. 16. CSS basic @font-face syntax <ul><li>@font-face { </li></ul><ul><li>font-family: ‘Arvo’; </li></ul><ul><li>src: url(‘Arvo.ttf’) format(‘truetype’); </li></ul><ul><li>} </li></ul>
  17. 17. Convergent solution: CSS3 @font-face <ul><li>Browser support </li></ul><ul><ul><li>IE – since IE4 </li></ul></ul><ul><ul><li>Firefox – since 3.5 </li></ul></ul><ul><ul><li>Chrome – stable since 4.0 </li></ul></ul><ul><ul><li>Safari – since 3.1 </li></ul></ul><ul><ul><li>Safari Mobile – since iOS 4.2 </li></ul></ul><ul><ul><li>Opera – since Opera 10 </li></ul></ul><ul><ul><li>Opera Mobile – since 9.7 </li></ul></ul>http://webfonts.info/wiki/index.php?title=%40font-face_browser_support
  18. 18. General technique <ul><li>Licensing </li></ul><ul><ul><li>Get your fonts from a web font services provider that has taken care of the licensing. Some free, many others low cost </li></ul></ul><ul><ul><li>If using fonts you own check the license to be sure use on the web is permitted. </li></ul></ul><ul><li>Upload the font you want to your web server </li></ul><ul><li>Add a little bit of CSS </li></ul>
  19. 19. CSS basic @font-face syntax <ul><li>@font-face { </li></ul><ul><li>font-family: ‘Arvo’; </li></ul><ul><li>src: url(‘Arvo.ttf’) format(‘truetype’); </li></ul><ul><li>} </li></ul><ul><li>P { </li></ul><ul><li>font-family:‘Arvo’, Arial, sans-serif; </li></ul><ul><li>} </li></ul>
  20. 20. Font file types <ul><li>‘ eot’ </li></ul><ul><ul><li>embedded open type (IE proprietary) </li></ul></ul><ul><li>‘ woff’ </li></ul><ul><ul><li>cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+ </li></ul></ul><ul><li>‘ ttf’ </li></ul><ul><ul><li>Raw TrueType file, designed to look good on-screen. </li></ul></ul><ul><li>‘ svg’ </li></ul><ul><ul><li>XML format required by iOS devices before version 4.2. </li></ul></ul>
  21. 21. @font-face Cross-Browser Syntax <ul><li>@font-face { </li></ul><ul><li>font-family: ‘Arvo’; </li></ul><ul><li>src: url(‘Arvo.eot’); </li></ul><ul><li>src: url(‘Arvo.eot?iefix’) format (‘eot’), </li></ul><ul><li>url(‘Arvo.woff’) format (‘woff’), </li></ul><ul><li>url(‘Arvo.ttf’) format(‘truetype’); </li></ul><ul><li>url(‘Arvo.svg#SofIm’) format(‘svg’); </li></ul><ul><li>} </li></ul>
  22. 22. Web font services & providers <ul><li>Font Squirrel (free) </li></ul><ul><li>Font-Face </li></ul><ul><li>Fontdeck </li></ul><ul><li>FontShop </li></ul><ul><li>Fonts.com </li></ul><ul><li>Fontslive </li></ul><ul><li>Fontspring </li></ul><ul><li>Google Web Fonts (free) </li></ul><ul><li>Kernest </li></ul><ul><li>MyFonts </li></ul><ul><li>Typefront </li></ul><ul><li>Typekit </li></ul><ul><li>Typotheque </li></ul><ul><li>WebINK </li></ul><ul><li>Webtype </li></ul>
  23. 23. Examples <ul><li>FontSquirrel </li></ul><ul><ul><li>Fontsquirrel.com </li></ul></ul><ul><ul><li>About 650 font families </li></ul></ul><ul><li>Google Font API </li></ul><ul><ul><li>google.com/webfonts </li></ul></ul><ul><ul><li>About 120 </li></ul></ul><ul><li>Typekit </li></ul><ul><ul><li>Typekit.com </li></ul></ul><ul><ul><li>About 4000 </li></ul></ul><ul><li>WebINK from Extensis </li></ul><ul><ul><li>Webink.com </li></ul></ul><ul><ul><li>About 2000 </li></ul></ul>
  24. 24. FontSquirrel <ul><li>Lorem </li></ul><ul><ul><li>Ipsum </li></ul></ul>
  25. 25. FontSquirrel <ul><li>Free </li></ul><ul><li>Click “@font-face kit” to download kit </li></ul><ul><li>Copy entire folder to your site </li></ul><ul><ul><li>It contains the actual font files in all the needed formats </li></ul></ul><ul><li>HTML – link to stylesheet in the kit, or copy the styles to your CSS stylesheet </li></ul><ul><li>Add appropriate font-family to desired tags and elements </li></ul>
  26. 26. Testing <ul><li>Lorem </li></ul><ul><ul><li>Ipsum </li></ul></ul>
  27. 27. Google Font API <ul><li>Free </li></ul><ul><li>Fonts are hosted and served from Google </li></ul><ul><ul><li>not on your web server </li></ul></ul><ul><li>Click on desired font </li></ul><ul><li>Click “Use this font” tab </li></ul><ul><li>HTML – copy link code into HTML head </li></ul><ul><ul><li>This links to Google’s stylesheet </li></ul></ul><ul><li>In your stylesheet, add appropriate font-family to desired tags and elements </li></ul>
  28. 28. Typekit <ul><li>Free for two fonts on one site </li></ul><ul><li>Low cost for more </li></ul><ul><li>Signup is quick </li></ul><ul><li>Copy the JS links to your HTML head </li></ul><ul><ul><li>Unique for your registered website </li></ul></ul><ul><li>Select font </li></ul><ul><ul><li>Add selectors in text field, “Publish” </li></ul></ul><ul><li>In your stylesheet, add appropriate font-family to desired tags and elements </li></ul>
  29. 29. Typekit <ul><li>Free for two fonts on one site </li></ul><ul><li>Paid plans start at $24.99 per year (2 sites, 5 fonts per site) </li></ul><ul><li>Fonts are hosted and served from Typekit </li></ul><ul><ul><li>not on your web server </li></ul></ul><ul><li>Signup is quick </li></ul><ul><li>Copy the JS links to your HTML head </li></ul><ul><ul><li>Unique for your registered website </li></ul></ul><ul><li>Select font </li></ul><ul><ul><li>Add selectors in text field, “Publish” </li></ul></ul><ul><li>Wait a few minutes and refresh your screen </li></ul>
  30. 30. Testing <ul><li>Lorem </li></ul><ul><ul><li>Ipsum </li></ul></ul>
  31. 31. WebINK <ul><li>Fonts are hosted and served from WebInk </li></ul><ul><ul><li>not on your web server </li></ul></ul><ul><li>30 day free trial </li></ul><ul><li>Fees based on most expensive font in a Type Drawer and bandwidth used to serve fonts </li></ul><ul><ul><li>Typically $1.99/month and up </li></ul></ul><ul><li>Create an account </li></ul><ul><li>Create a Type Drawer </li></ul><ul><li>Add fonts to your Type Drawer </li></ul><ul><li>Add up to 4 domains per Type Drawer </li></ul><ul><li>Enable your Type Drawer. </li></ul><ul><li>Get CSS @font-face code from button in your Type Drawer. </li></ul><ul><li>Add the CSS and font-families to your stylesheet </li></ul><ul><li>Signup is not too bad, but more involved than others </li></ul>
  32. 32. Testing <ul><li>Lorem </li></ul><ul><ul><li>Ipsum </li></ul></ul>
  33. 33. Technical issues <ul><li>Safari, Chrome, Internet Explorer </li></ul><ul><ul><li>leave a blank space in place of the styled text while the web font is loading. </li></ul></ul><ul><li>Opera and Firefox </li></ul><ul><ul><li>show text with the default font which switches over when the web font has loaded, resulting in the so-called Flash of Unstyled Text (aka FOUT) </li></ul></ul>
  34. 34. Technical solutions <ul><li>WebFont Loader: JavaScript library provides control over font loading. </li></ul><ul><li>Co-developed by Google and Typekit, and released as open source. </li></ul><ul><li>Works with most web font services and with self-hosted fonts. </li></ul><ul><li>Whatever your preference, the WebFont Loader can make all browsers behave the same way. </li></ul><ul><li>More details: http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behave-the-same </li></ul>
  35. 35. Rules for Good Type <ul><li>Choose a good typeface </li></ul><ul><li>Don't use too many </li></ul><ul><li>Have a clear hierarchy </li></ul><ul><li>If in doubt, read it. </li></ul>Stephen Coles, SXSW 2011 http://typographica.org/2011/on-typography/intro-to-typeface-selection/
  36. 36. Choose a good typeface <ul><li>Proper for the format, the content, the reader </li></ul><ul><li>Poor choices = hard to read </li></ul><ul><ul><li>If your content isn’t easy on the eyes and brain, people will give up, readers won’t come back </li></ul></ul><ul><li>Test by setting &quot;Party PARTY Mg&quot; </li></ul><ul><ul><li>What kind of party is this going to be? </li></ul></ul><ul><ul><li>‘ M’ & ‘g’ contain a lot of the DNA of a type face </li></ul></ul>Stephen Coles http://typographica.org/2011/on-typography/intro-to-typeface-selection/
  37. 37. Don't use too many <ul><li>Try one font </li></ul><ul><li>Maybe try 2 </li></ul><ul><li>Very few sites successfully use 3 effectively on the same page </li></ul><ul><ul><li>A rare example: </li></ul></ul><ul><ul><li>http://www.abookapart.com/ </li></ul></ul>Stephen Coles, SXSW 2011 http://typographica.org/2011/on-typography/intro-to-typeface-selection/
  38. 38. Have a clear hierarchy <ul><li>Make more important things bigger </li></ul><ul><li>Make less important things smaller </li></ul>Stephen Coles, SXSW 2011 http://typographica.org/2011/on-typography/intro-to-typeface-selection/
  39. 39. If in doubt, read it <ul><li>Huffingtonpost.com: example of frustrating to read. Poor typeface selections </li></ul>Stephen Coles, SXSW 2011 http://typographica.org/2011/on-typography/intro-to-typeface-selection/
  40. 40. Terms and tips <ul><li>Display faces – for headlines </li></ul><ul><li>Text faces – for body copy </li></ul><ul><li>Taller x-heights generally work better for reading </li></ul><ul><ul><li>top half of text form contains most of the information </li></ul></ul><ul><ul><li>more information = easier to read. </li></ul></ul>Jason Santa Maria, SXSW 2011 http://typographica.org/2011/on-typography/intro-to-typeface-selection/
  41. 41. Terms and tips <ul><li>Display faces – for headlines </li></ul><ul><li>Text faces – for body copy </li></ul><ul><li>Taller x-heights generally work better for reading </li></ul><ul><ul><li>top half of text form contains most of the information </li></ul></ul><ul><ul><li>more information = easier to read. </li></ul></ul>Jason Santa Maria, SXSW 2011 http://typographica.org/2011/on-typography/intro-to-typeface-selection/
  42. 42. Terms and tips <ul><li>Display faces – for headlines </li></ul><ul><li>Text faces – for body copy </li></ul><ul><li>Taller x-heights generally work better for reading </li></ul><ul><ul><li>top half of text form contains most of the information </li></ul></ul><ul><ul><li>more information = easier to read. </li></ul></ul>Jason Santa Maria, SXSW 2011 http://typographica.org/2011/on-typography/intro-to-typeface-selection/
  43. 43. Advanced <ul><li>Some interesting things if you really get into this stuff </li></ul>
  44. 44. Type rendering: APIs (OS dependent) <ul><li>Specialized components within an OS responsible for rasterizing fonts’ vector outlines </li></ul><ul><li>Core Graphics (Core Text) </li></ul><ul><ul><li>Mac OSX and iOS </li></ul></ul><ul><ul><li>tends to respect a typeface’s designed shape, which essentially means thicker letters (rather than pixel grid strictness) </li></ul></ul><ul><li>DirectWrite </li></ul><ul><ul><li>Windows 7, Vista (latest & greatest) </li></ul></ul><ul><ul><li>It is markedly clearer, smoother, and has less intense color fringing than Core Text and older Windows text rendering engines </li></ul></ul><ul><li>GDI </li></ul><ul><ul><li>Older, available on Windows 7, Vista, and XP </li></ul></ul>
  45. 45. Apple vs. Microsoft: Philosophy <ul><li>Windows provide users with several antialiasing preferences from which to choose </li></ul><ul><ul><li>ClearType (sub-pixel antialiasing with color) </li></ul></ul><ul><ul><li>Standard (grayscale antialiasing) </li></ul></ul><ul><ul><li>No antialiasing (black & white text w/o any smoothing) </li></ul></ul><ul><li>By default: </li></ul><ul><ul><li>ClearType is enabled in Windows 7 and Vista </li></ul></ul><ul><ul><li>Standard is enabled in Windows XP </li></ul></ul>http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/
  46. 46. Type Rendering: Browsers <ul><li>Mac: all web browsers use </li></ul><ul><ul><li>Core Text (the only system text rendering engine) </li></ul></ul><ul><ul><li>OS font smoothing settings </li></ul></ul><ul><ul><li>There are no browser preferences that affect the way type is antialiased. </li></ul></ul>http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
  47. 47. Type Rendering: Browsers <ul><li>Windows: Firefox, Chrome, Safari, Opera, & IE6 </li></ul><ul><ul><li>Use system default text rendering engine (GDI or DirectWrite) </li></ul></ul><ul><ul><li>OS font smoothing settings. </li></ul></ul><ul><ul><li>In general, a given font, on a given Windows installation, will render consistently in all of these browsers </li></ul></ul>http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
  48. 48. Type Rendering: Browsers <ul><li>Windows: IE7 </li></ul><ul><ul><li>Internet Explorer 7 has a preference called “Always use ClearType for HTML” that overrides the default OS font smoothing setting </li></ul></ul><ul><ul><li>Enabled by default, which means that users of IE7 will usually see type that is antialiased with ClearType — even if they are using Windows XP or have explicitly chosen standard font smoothing in their OS settings. </li></ul></ul>http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
  49. 49. Type Rendering: Browsers <ul><li>Windows: IE8 </li></ul><ul><ul><li>Also has “Always use ClearType for HTML” preference </li></ul></ul><ul><ul><li>Also enabled by default </li></ul></ul><ul><ul><li>However, when IE8 is installed it forcibly changes the OS font smoothing setting to ClearType sub-pixel antialiasing </li></ul></ul><ul><ul><ul><li>Font smoothing is affected everywhere — not just in IE8. </li></ul></ul></ul><ul><ul><ul><li>For example, if you’re a Windows XP Firefox user who has never modified your smoothing settings – and you happen to install IE8 – you would subsequently see ClearType-antialiased text in Firefox </li></ul></ul></ul>http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
  50. 50. Type Rendering: Browsers <ul><li>Windows: IE9 </li></ul><ul><ul><li>IE9 bypasses OS font smoothing settings in favor of Microsoft’s DirectWrite text rendering engine, which makes type look incredible </li></ul></ul><ul><ul><li>Ensures that all IE9 users will see type rendered the same way </li></ul></ul><ul><li>Windows: Firefox 4 </li></ul><ul><ul><li>Firefox 4 will reportedly also use DirectWrite for text rendering </li></ul></ul>http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
  51. 51. Browser Testing (for Type) <ul><li>Any Mac browser </li></ul><ul><li>IE9 </li></ul><ul><li>IE8 with ClearType enabled </li></ul><ul><li>IE6 with Standard antialiasing enabled </li></ul><ul><li>Firefox 4 </li></ul><ul><li>This list based on out-of-the-box browser/OS installations, where no settings or preferences have been changed by a user </li></ul>http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
  52. 52. Resources <ul><li>Review of 10 font embedding services: </li></ul><ul><ul><li>http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/ </li></ul></ul><ul><li>SXSW 2011 typography talk (resources section is also very good!): </li></ul><ul><ul><li>http://typographica.org/2011/on-typography/intro-to-typeface-selection/ </li></ul></ul><ul><li>Type rendering on the web, 7-part series (short and very good): </li></ul><ul><ul><li>http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/ </li></ul></ul>
  53. 53. Resources <ul><li>Good Typekit fonts for web: </li></ul><ul><ul><li>http://www.sleepoversf.com/the-great-typekit-table/ </li></ul></ul><ul><li>Additional explanation regarding font-face implementation: </li></ul><ul><ul><li>http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ </li></ul></ul>
  54. 54. Resources – web font loader <ul><li>Good article: Gives JS handles to control flash of unstyled text (FOUT): </li></ul><ul><ul><li>http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behave-the-same </li></ul></ul><ul><li>Google blog article: </li></ul><ul><ul><li>http://googlecode.blogspot.com/2010/05/introducing-webfont-loader-in.html </li></ul></ul><ul><li>Google’s documentation: </li></ul><ul><ul><li>http://code.google.com/apis/webfonts/docs/webfont_loader.html </li></ul></ul><ul><li>Typekit’s documentation: </li></ul><ul><ul><li>https://github.com/typekit/webfontloader </li></ul></ul>
  55. 55. Examples of web font services in use <ul><li>http://lostworldsfairs.com/ </li></ul><ul><li>http://www.abookapart.com/ </li></ul>
  56. 56. Where to find me <ul><li>Twitter: @ron_z </li></ul><ul><li>[email_address] </li></ul><ul><li>codegeek.net </li></ul><ul><li>SocialMediaPilots.com </li></ul><ul><li>EinsteinAndSockMonkey.com </li></ul><ul><ul><li>@EinsteinMonkey </li></ul></ul><ul><ul><li>My web design/dev/ux podcast with Steve Martin @CleverCubed </li></ul></ul><ul><li>IgniteFortCollins.com and @IgniteFC </li></ul><ul><li>The Fort Collins Hive, shared office space for creatives: HiveFC.com </li></ul>
  57. 57. Web Font Services Fort Collins Internet Professionals March 24, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×