Web font services: March 2011

»

Web Font ServicesWeb Font Services

Fort Collins Internet ProfessionalsFort Collins Internet ProfessionalsMarch 24, 2011March 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)

» 1280 x 800

1280 x 800Flickr: goodrob13

1280 x 800Flickr: 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 since1997 !?

» Did you know?

• Font embedding has been around since1997 !?

• Guess which browser was first?

» 1280 x 800

Photo: Steve Rhodes

16 : 9Photo: Steve Rhodes

16 : 9Photo: 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 {


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 {


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 Type1. Choose a good typeface

2. Don't use too many

3. Have a clear hierarchy

4. 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/


» Have a clear hierarchy• Make more important things bigger • Make less important things smaller


» If in doubt, read it• Huffingtonpost.com: example of frustrating to

read. Poor typeface selections


» 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 choose1. ClearType (sub-pixel antialiasing with color)2. Standard (grayscale antialiasing)3. 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/


• 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



• 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.



• 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



• 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


» 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


» 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 protected]• 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 ServicesWeb Font Services

Fort Collins Internet ProfessionalsFort Collins Internet ProfessionalsMarch 24, 2011March 24, 2011

Web font services: March 2011

Design

Transcript of Web font services: March 2011