Web font services: March 2011

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)

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

In the past, to use creative fonts
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 {
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
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
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/

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

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_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

Web font services: March 2011

by RZasadzinski on Mar 28, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Web font services: March 2011 Presentation Transcript