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

Web font services: March 2011

on

  • 2,988 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
2,988
Slideshare-icon Views on SlideShare
2,987
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