The Type We Want
Using Fonts on the Web
Friday, November 6, 2009

Friday, November 6, 2009

Friday, November 6, 2009

Friday, November 6, 2009

Why?
Typography is a key element in defining
style
feel
mood
readability
Friday, November 6, 2009

The Font Tag
Ooh, we can make it look pretty!
Friday, November 6, 2009

Font Tag
<font
face="Arial"
size="3">
I
feel
pretty.
Oh
so
pretty.
</font>
Friday, November 6, 2009

Images
Any font but at what price?
Friday, November 6, 2009

Images
Images allows for any font to be used
Only practical for limited items with short text
Abused by clients
Printing is less than ideal
Friday, November 6, 2009

CSS and Font Stacks
Flexible design but who gets to see it?
Friday, November 6, 2009

CSS
#pretty
{
font-­‐family:
Arial,
Helvetica,
sans-­‐serif;
}
#prettier
{
font-­‐family:
"Gotham
Medium",
sans-­‐serif;
}
Friday, November 6, 2009

Oops
<p
class="bodytext">I
want
to
look
pretty</p>
<p
class="bodytext">I
want
to
feel
pretty</p>
<p
class="bodytext">I
want
to
be
pretty</p>
Friday, November 6, 2009

Common Font Stacks
Arial, Helvetica, sans-serif
Courier New, Courier, monospace
Times New Roman, Times, serif
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Friday, November 6, 2009

Complex Font Stacks
//
Verdana
Alternative
font-­‐family:
"Segoe
UI",
Candara,
"Bitstream
Vera
Sans",
"DejaVu
Sans",
"Bitstream
Vera
Sans",
"Trebuchet
MS",
Verdana,
"Verdana
Ref",
sans-­‐serif;
Friday, November 6, 2009

Complex Font Stacks
Better Font Stacks
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
8 Definitive Web Font Stacks
http://articles.sitepoint.com/article/eight-definitive-font-stacks
Friday, November 6, 2009

sIFR, Cufón, Typeface
Now we’re getting somewhere
Friday, November 6, 2009

sIFR
sIFR requires JavaScript AND Flash
Slow for a lot of elements
Best used for headlines
Can be difficult to tweak
Support for CSS features is limited
Friday, November 6, 2009

Cufón
Generates SVG font and VML outlines
Draws to <canvas> in all browsers that support it
(ie: not IE)
No text selection
Original text is made invisible
Supports some CSS Styling (more than sIFR)
Friday, November 6, 2009

Typeface.js
Supports additional CSS styling over Cufon such as
letter-spacing and font-stretch.
Friday, November 6, 2009

Licensing
Most licenses aren’t very clear and should be
clarified with foundry
Many fonts don’t allow embedding in this fashion
Friday, November 6, 2009

@font-face
Have we reached utopia?
Friday, November 6, 2009

TrueType (TTF) & OpenType (OTF)
Supported in Firefox 3.5+, Safari 3+, Opera 10+
Including Opera Mobile
Expected in Chrome 4
Can be enabled in Chrome now with a command
line switch
Friday, November 6, 2009

Friday, November 6, 2009

Friday, November 6, 2009

Embedded OpenType (EOT)
Support in IE4+
TTF2EOT
Command line
Web services exist to make this conversion
WEFT
Complete and utter garbage
Friday, November 6, 2009

Getting from OTF to TTF to EOT
The problem with the EOT apps is that they require
a TTF and most fonts today are OTF.
FontForge will convert OTF to TTF
Font names aren’t transferred and must be set
manually to allow TTF to EOT process to work
reliably.
http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot
Friday, November 6, 2009

SVG
Chrome 0.3+ support with no need for a command
line flag
Works on iPhone OS3.1+
Opera bug doesn’t show embedded font on second
tab
Text selection works but not consistently
Friday, November 6, 2009

Friday, November 6, 2009

Creating SVG Fonts
FontForge
Requires tweak to XML namespace
Batik
SVG may need to be cleaned up to remove
extraneous data (empty nodes and attributes)
Friday, November 6, 2009

Web Open Font Format (WOFF)
in Firefox 3.6 (beta 1 just released)
Supported by major font foundries
Friday, November 6, 2009

Creating WOFF Files
Command line tool: sfnt2woff
Mac or Windows
http://people.mozilla.com/~jkew/woff/
Friday, November 6, 2009

Bulletproof @font-face
@font-­‐face
{
font-­‐family:
'MuseoCustom';
src:
url('MuseoSans-­‐500.eot');
src:
local('Museo
Sans
500'),
local('MuseoSans-­‐500'),
url('museo.woff')
format('woff'),
url('MuseoSans-­‐500.ttf')
format('opentype'),
url('museo.svg#museo')
format('svg');
}
Friday, November 6, 2009

All-in-one Conversion
Font Squirrel provides a one step conversion
process
Upload TTF or OTF
Provides EOT, SVG and WOFF format
Does subsetting
Creates example HTML and CSS
Friday, November 6, 2009

Subsetting
Font files can be megabytes in size
Arial Unicode MS is 23MB
Many fonts are still 100K+
Friday, November 6, 2009

Subsetting
Subsetting reduces the number of glyphs in the file
great for latin languages
not so great for asian languages
Friday, November 6, 2009

Friday, November 6, 2009

Subsetting Gotcha
Be careful removing lower case glyphs if using
upper case
IE and Opera have a bug with text-transform:
uppercase that will use fallback font instead of
subsetted font
Friday, November 6, 2009

Licensing
Most fonts, even some free fonts, DON’T allow
@font-face embedding
Foundries that support WOFF haven’t provided
updated licenses yet
Contact them directly for more info
Friday, November 6, 2009

Performance
Firefox, Opera shows unstyled text until font
downloaded (FOUT!)
Blocking in IE if <script> before @font-face
declaration; otherwise, unstyled until font
downloaded
Safari, Chrome show no text until font
downloaded
Opera doesn’t show the embedded font after
the first page
http://www.useragentman.com/blog/2009/10/09/more-font-
face-fun/
http://www.stevesouders.com/blog/2009/10/13/font-face-and-
performance/
Friday, November 6, 2009

Compression
EOT and WOFF support compression
WEFT compresses by default, TTF2EOT doesn’t
Use GZIP compression where font isn’t already
compressed
uncompressed EOT
TTF, OTF, and SVG
Friday, November 6, 2009

Font Embedding Services
TypeKit
Typotheque
Kernest
Friday, November 6, 2009

Disadvantages of FES
If the server goes down, does your design have a
suitable fallback?
Some services require JavaScript
None of the services serve SVG
Services obfuscate to prevent ability to install font
permanently
Not cached
Friday, November 6, 2009

Resources
FontForge
http://fontforge.sourceforge.net/
Batik
http://xmlgraphics.apache.org/batik/tools/font-converter.html
FontSquirrel Generator
http://www.fontsquirrel.com/fontface/generator
Friday, November 6, 2009

Where to get fonts
FontSquirrel
http://www.fontsquirrel.com/
TypeKit
http://typekit.com/
Typotheque
http://www.typotheque.com/
Kernest
http://www.kernest.com/
Friday, November 6, 2009

Presentation Fonts
Headlines: League Gothic
Free and open source; supports all manner of
embedding
Body: Museo Sans 500
Free and supports @font-face embedding as long as
you link back to the foundry
Additional weights available for sale
Code: Consolas
Comes with Microsoft Office
Not free and requires special EOT embedding license
Friday, November 6, 2009

Questions?
Hit me with your best shot. Fire away.
Friday, November 6, 2009