Your SlideShare is downloading. ×
  • Like
Web font services: March 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web font services: March 2011

  • 2,568 views
Published

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, …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,568
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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