Web font services: March 2011
Upcoming SlideShare
Loading in...5
×
 

Web font services: March 2011

on

  • 3,010 views

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.

Statistics

Views

Total Views
3,010
Views on SlideShare
3,009
Embed Views
1

Actions

Likes
2
Downloads
19
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Web font services: March 2011 Web font services: March 2011 Presentation Transcript

  • 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
    • We’ve been relying on the fonts present on the computer used to view the website
  • Where we’re headed
    • All of the text on the following page is HTML text (no images of text)
  • Where we’re headed
    • All of the text on the following page is HTML text (no images of text)
  • 1280 x 800 1280 x 800 Flickr: goodrob13
  • In the past, to use creative fonts
    • Image replacement – typography as a graphic
  • In the past, to use other fonts
    • Image replacement – typography as a graphic
  • 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
  • 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
  • Did you know?
    • Font embedding has been around since…?
  • Did you know?
    • Font embedding has been around since 1997 !?
  • Did you know?
    • Font embedding has been around since 1997 !?
    • Guess which browser was first?
  • 1280 x 800 Photo: Steve Rhodes 16 : 9 Photo: Steve Rhodes Flickr: iFranky
  • Browser inconsistency
    • Has been a big problem
  • CSS basic @font-face syntax
    • @font-face {
    • font-family: ‘Arvo’;
    • src: url(‘Arvo.ttf’) format(‘truetype’);
    • }
  • 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
  • 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
  • CSS basic @font-face syntax
    • @font-face {
    • font-family: ‘Arvo’;
    • src: url(‘Arvo.ttf’) format(‘truetype’);
    • }
    • P {
    • font-family:‘Arvo’, Arial, sans-serif;
    • }
  • 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.
  • @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’);
    • }
  • 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
  • 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
  • FontSquirrel
    • Lorem
      • Ipsum
  • 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
  • Testing
    • Lorem
      • Ipsum
  • 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
  • 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
  • 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
  • Testing
    • Lorem
      • Ipsum
  • 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
  • Testing
    • Lorem
      • Ipsum
  • 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)
  • 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
  • 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/
  • 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/
  • 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/
  • 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/
  • 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/
  • 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/
  • 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/
  • 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/
  • Advanced
    • Some interesting things if you really get into this stuff
  • 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
  • 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/
  • 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/
  • 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/
  • 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/
  • 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/
  • 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/
  • 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/
  • 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/
  • 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/
  • 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
  • Examples of web font services in use
    • http://lostworldsfairs.com/
    • http://www.abookapart.com/
  • 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
  • Web Font Services Fort Collins Internet Professionals March 24, 2011