For almost 15 years, Web designers have had a list of 10 “Core Web fonts” to choose from. Many ask, “Why can’t I just download a font file from my Web server the same way I can an image?” Well, actually, you can. The verbiage for font linking is a little different than images, but the syntax for Webfont linking has been around for over 10 years as a part of the CSS standard. Web typography expert Jason Cranford Teague shows you how to apply the principles of fluid typography, to choose, find and use Webfonts and create your unique typographic voice. Come and find out why 2010 is going to be the year of Web typography.

1. 
2010
The Year of Web Typography
Jason Cranford Teague
jasonspeaking.com | @jasonspeaking
Web Directions USA
28 July 2010

2. 
@fluidwebtype
fluidwebtype.info/web-directions

3. Q:
What do these 3 Things
have in common?

4. Flying Cars

5. Trips to Jupiter

6. Webfonts

7. A:
2010
3 things I was supposed to have.

8. 2008

9. 2008
2009

10. 
2008
2009
2010
The Year of
Web Typography

11. 
What's New?
Webfont Support
Easy font conversion
Web font service bureaus

12. 
Web Typography
Use
Find
Choose

14. A A A A A A
A A A A A A
A A A A A
A A A A A

15. “Type design is an act of plagiarism
in itself — you basically recreate
the flesh of the same skeleton.”
Alejandro Saravia
pampatype.com

16. 
What if everybody looked the same…
…and everybody was UGLY?

17. typography::type
voice::speech

18. If I say…
“I’m going to kill you”

19. “I’m going to kill you”
Cooper Black
“I’m going to kill you”
Synchro LET
“I’m going to kill you”
Sybil Green
“I’m going to kill you”
UglyQua

20. and A Brand BBrand
d C Brand D Brand E
and FBrand X Brand
Brand X
G Brand H Brand I
rand J Brand K Bran
d S Brand R Brand T

21. 

22. 

23. 

24. yahoo.com

25. aol.com

26. msn.com

27. Web Typography =
HTML + CSS

28. Web Typography =
Limited Font Choices

29. Web Typography =
UGLY!!!!!

30. audio video columns
newsletter about subscribe
search
Why I Write
By DORIANNE LAUX on 2.08.10
I have recently begun to think of writing as what Susan Sontag calls “a
wisdom project” in her forward to Another Beauty, a collection of
autobiographical essays by the great Polish poet Adam Zagajewski. Dorianne Laux is the author of four
books of poetry and co-author of The
Poet’s Companion: A Guide to the
“…autobiography is an occasion to purge oneself of vanity,
Pleasures of Writing Poetry. She has
while advancing the project of self understanding—call it the
been the recipient of the Oregon Book
wisdom project—which is never completed, however long the Award and was short-listed for the
life.” Lenore Marshall Poetry Prize. She lives
in Raleigh, North Carolina where she teaches poetry at North
I am still hard at work on this project of the self. The solitary self, as well Carolina State University. For more, go to DorianneLaux.com.
as the self in relation to the world and the unknown universe we swirl
around in, uncertain of our purpose or future. When I wrote the poems
Poems Out Loud
that would become my first book, I didn’t think of it as a book, but rather
as a need to understand the basic questions that all human beings ask:
Who am I? Why am I here? Where am I going? What is beauty? Why is Facts About the Moon
there suffering? Where is truth? These questions would arise in me in the
Buy from POWELLS
form of poems, and in making the poems into a collection, I tried to
Buy from INDIEBOUND
arrange them in a shape, find a path for them to travel to make clearer
those questions. I write to know the questions. In her powerful fourth collection,
Dorianne Laux once again strikes fire
Poem after poem, book after book, the ante is upped. I think this could be from neighborhood moments: a quiet

31. autumn summer
@sophiaw happy monday / month
to you too!
Mon, Mar 01, 2010 - 14:00:22, from
TweetDeck
When life serves you lemons make lemonade goes the saying and these days tsimitakis Watch this video: http://slide.com/t/5/5/iRdYgA7YzOlG
life does taste like home made lemonade. Some times overly sour, sometimes ΣκληρόβίντεογιατηΓάζα
Acid Smile
overly sweet. On occasion sour but with the grains of sugar crunchy between f r o m w e b , M o n , M a r 01, 2010 - 15: 03: 25
your teeth. Some things are going extremely well, others very badly and in
some cases I have no clue what is going on. Days merge into nights, weeks tgeorgakopoulos http://twitpic.com/16178x - ΤζάστινΠλιάτσικας
change and suddenly it’s the end of February and I’m wondering where two (@The_Stranger_gr μεπρόλαβες) #pliatsikas
months of my life have gone and what have I done with them. Existential f r o m T w i t P i c , Mon, Mar 01, 2010 - 15:02:46
c,
questions aside, everything since the 6th of Jan when I went back to work
seems like a blur. Very stressful, too much work, too many variables. djzinc that chat roulette thing is raw
Normally I thrive…... f r o m w e b , M o n , M a r 01, 2010 - 15: 02: 25
2010 - #p52 - loose thoughts - ramblings
24/Feb/2010

32. Voices $199
Voice morphing for your iPhone! per piece
Convert 99¢
per piece
The unit converter & calculator
plasma
TapTapTap
Parablox 99¢
per piece
Feed your brain and test your
reflexes!
Classics Free

33. Workflow and
collaboration.
Content management solutions that don't feel templated.
CONTENT MANAGEMENT SYSTEMS
DRUPAL CMS
ALFRESCO WCM
Work At Play
TOOLBOX
The right tools for the job

34. Webfonts
or
Web fonts?

35. 
USING
Webfonts

36. How many fonts are there?
>100 Thousand

37. How many fonts are used on the
Web?
5 Fonts

38. Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana


39. Verdana
Georgia
Trebuchet MS
Arial
Times New Roman

40. Arial
Georgia
Times New Roman
Trebuchet MS
Verdana

41. (Pre)Installed
OS
Software

42. Web Safe Fonts
~190 Fonts

43. Web Safe Fonts
Windows & Mac = 59 Fonts

44. Websafe Fontsß 3 I
Font Name Weight and Style OS Rank Sample
1 Academy Engraved LET 3-Likely
2 Agency FB bold 4-Less Likely
3 Algerian 4-Less Likely
4 American Typewriter bold 2-Almost Certain
5 Andale Mono 1-Certain
6 Apple Chancery
Web Safe Fonts
2-Almost Certain
7 Apple Symbols 2-Almost Certain
8 Arial bold, italic, bold/italic 1-Certain

45. !"#$%&'()')(*#+',-*./0.'1%#2'!"3'"*.'4%*.(1+'(50$"#%*6
+7+#08+9'!%3$(+()#':))%30'"*.';.(,0'<$0"#%=0'>-%#0
Office
Mac OS Windows OS Office Windows Mac Adobe Creative Suite
OS X OS X Windows Windows Office Office Office Acrobat Illustrator InDesign CS2 CS3 CS3
Tiger Leopard XP SP2 Vista 2003 2007 2004 7 CS2 CS2 extras install disk
Adobe Caslon Pro x x x
Adobe Garamond Pro x x x
Adobe Jenson Pro x
Agency FB x x
Agency FB Bold x x
American Typewriter x x
Andale Mono x x x x x x
Apple Chancery x x
Arial x x x x x x
Arial Black x x x x x x
Arial Narrow x x x x x
Arial Rounded MT Bold x x x x x
x x x
Matrix of Fonts
Arno Pro x
Baskerville x x
Baskerville Old Face x x x
Bauhaus 93 x x x
Bell Gothic Std x
Bell MT x x x

46. Webfonts
Any font?

47. web-safe
star understudy
core web generic
understudy
font-­‐family:
verdana,
arial,
sans-­‐serif;

48. Diavlo

49. name you give it
@font-­‐face
{ ...
}
font-­‐family:
'body
copy';
font-­‐family:
Diavlo;
src:
local(Diavlo)
src:
url('fonts/Diavlo_BOOK_II_37.otf'); local name
url('fonts/Diavlo_BOOK_II_37.otf');
}
font-­‐style:
normal;
font properties
font-­‐weight:
normal;
path to font file
font-­‐stretch:
normal;
font-­‐variant:
normal;
}

50. name you gave it
font-­‐family:
tahoma,
arial,
sans-­‐serif;
'body
copy',
verdana,
arial,
sans-­‐serif;
diavlo,
verdana,
arial,
sans-­‐serif;

51. File Formats
True Type (.ttf)
Open Type (.otf)

52. File Formats
Embedded Open Type(.eot)
EOT Lite (.eot)

53. File Formats
Scalable Vector Graphics (.svg)

54. File Formats
Web Open Font Format (.woff)

55. Browser Font Support
EOT/EOT LITE ✔
TTF/OTF ✔ ✔ ✔ ✔
SVG ✔ ✔ ✔
WOFF Coming Soon! ✔ ? Coming Soon! Coming Soon!

56. SVG or WOFF
???

57. EOT for IE
@font-­‐face
{ font-­‐family:
'body
copy';
src:
url('fonts/Diavlo_BOOK.eot');
src:
url('fonts/Diavlo_BOOK.otf');
}
src:
local('☺'), Local Name
WOFF
url('fonts/Diavlo_BOOK.woff')
format('woff');
OTF/TTF
url('fonts/Diavlo_BOOK.otf')
format('opentype');
SVG
url('fonts/Diavlo_BOOK.svg#diavlo-­‐regular')
format('svg');
}

58. 
Sub-setting = Compression

59. EULA
End User License
Agreement

60. IP
Intellectual Property

61. Exljbris

62. Emigre

63. Chank

64. What about
sIFR & Cufón

65. 
FINDING
Webfonts

66. Webfonts Sources
Licensed Webfonts
Webfont Service Bureaus

67. Licensed Fonts
Under Your Control

68. Celebrating 20 years! English Log In
Fonts Blog Help HISTORY FAVORITES (0) CART (0)
Browse Fonts
Search for fonts...
Category
Foundry
Designer Get Started
Browse & buy fonts ▶
Random
Browse by Category,
Gallery Foundry, or Designer. Or
Top Fonts let our research team do
the work for you.
New Fonts
Bestsellers Discover new type ▶
Staff Picks Our blog is updated
frequently with fresh fonts
Your Fonts and recommendations, the
History Newsletter brings the
latest to your email inbox,
Favorites or discover type in print
with FontBook.
Get smart ▶
Expert advice on formats,
installation, or licensing is
just a click or Call away.
We welcome four new foundries to
FontFont
FontShop.com: Hubert Jocham, Castle
Type, HvD Fonts, and ReType. See
them all.
Voice Embryo Goudy Trajan
A font to benefit victims of the The FontFeed is a daily dispatch of recommended

69. Find Fonts
ONLY THE BEST
Twitter | RSS Feed
FILTER
COMMERCIAL-
All Formats
@font-face
USE FREE FONTS
STYLE
Blackletter 17
Calligraphic 17
Comic 26
Dingbat 27
Free fonts have met their match. We know how hard it is to find Display 91
Grunge 39
quality freeware that is licensed for commercial work. We've done Handdrawn 42
Initials 3
the hard work, hand-selecting these typefaces and presenting them Monospaced 24
Novelty 26
in an easy-to-use format. Here are some of our favorites: Pixel 4
Retro 35
Font Squirrel
Sans Serif 118
Script 47
Serif 62
Slab Serif 19
PT Sans | 8 Styles | TrueType | Paratype | View | Download TTF Stencil 21
Typewriter 11
Total Families: 629
Font Foundries List
Museo Slab | 2 Styles | OpenType | Exljbris | View | Download OTF (offsite) ABOUT
Font Squirrel is your

70. My account / Login
My shopping cart
presented in: Linotype Authentic™ Sans Bold My favorites
Font Finder Font Products Font Services Font Lounge News Support Company
Search for Fonts We serve all your Font and Type needs at Linotype.com
Advanced search ... Linotype Top Sellers
Try, purchase and download complete font families, value packs and single font weights from US$ 26.00. We
offer you more than 12,000 original, high-quality fonts from classic to cool in OpenType, TrueType and 1. Neue Helvetica®
Text Fonts PostScript. – Try them out!
2. Helvetica®
for books and
magazines Font Finder (Shop) Foundries and Libraries Font of the Week 3. Avenir®
Script Fonts 4. Optima®
calligraphy,
5. Rotis® Sans Serif
handwriting fonts
Complete Font Charts …
Handwriting/Grunge
fonts with a
personal touch BA Graphics
Looking for a special font? A literal labor of love, created by Type News
Corporate Fonts Explore the various ways to find Browse through our comprehensive Daniel Pelavin – Save 20%!
fonts for New Font Releases
the font that fit your needs. product catalog. more ...
corporate design more ... more ... Font News
Celebration Fonts Platinum Collections
events from birthday
Fonts in Focus
to Halloween
News Award Font Services
Blackletter Fonts
gothic, celtic fonts Subscribe to our
newsletter or view
Comic Fonts the current issue.
kids and fun fonts
Western Fonts
Make the most out
inspired by
of your website –
Linotype
the Wild West
become an Affiliate!
Cool Fonts
modern, technical look
Linotype offers all
Screen Fonts The new FontExplorer X product Malabar received the 2010 German Take a look at our comprehensive
kinds of web
optimized for small line – high-level professional font Design Prize. Award ceremony on services, tailored to your needs.
shopping and
sizes management for you. 12th February 2010. more ...
licensing
Symbol Fonts more ... more ...
advantages.
pi fonts for
any occasion
Site Map Contact Imprint/Legal Terms of Use Monotype Imaging

71. Purchase Advantages…
➡ One Time Purchase
➡ Desktop Use
➡ Unlimited Domains
➡ Unlimited Page Views

72. What to look for in License…
✓ Webfont linking in EULA
✓Compression
✓ Formats
✓ Price Structure

73. Licensed Fonts
FontSquirrel FontFont FontSpring
Webfonts 560+ 100+ 1800+
fonts families families
Compression ✔
Formats EOT, OTF, TTF, SVG, & WOFF EOT & WOFF EOT, TTF, SVG, & WOFF
Price Free $80–860 Free–$100
family/WS font

74. Webfont Service Bureaus
Easy License &
Deployment

75. Typekit

76. Search
© 1999-2010
Featured
Font collection
Brioni
Brioni Text
Fedra Arabic
Fedra Hindi
Fedra Mono
Fedra Sans
Fedra Sans Alt
Fedra Sans Condensed
Fedra Sans Condensed
Alt
Fedra Sans Display 1
Fedra Sans Display 2
Fedra Serif A
Fedra Serif B
Fedra Serif Display
Fedra Serif Phonetic
Greta Display
Greta Display Narrow
Greta Grande
Greta Grande Narrow
Greta Text
News Fonts T-shirts
Greta Text Narrow
Typotheque now supports WOFF in A contemporary typeface family ‘A piece of text that looks good but History
Firefox 3.6 (25 Jan 2010) specifically designed for the demands of doesn't say anything’, printed in typeface Irma
Selection of websites using Typotheque newspaper printing; it consists of four Irma, using its OpenType features mixing Irma Slab
Web Font Service (23 Jan 2010) primary text weights (each in three positive and negative spaces of letters. Jigsaw
Open Manifesto (18 Jan 2010) grades) and is optimized for use at small Printed on Organic Fine Jersey T-Shirts Jigsaw Stencil
Gore’s choice (07 Jan 2010) sizes. from American Apparel. Klimax
Nara
Typotheque Web Font System now
Typotheque
supports Chrome (23 Dec 2009)
New articles: Methods of distribution (21 Fonts in use
Dec 2009)
View all news Subscribe
Mailing list Articles Books
Add yourself to our news email list. We The articles section is our attempt to We Want You To Love Type by Johanna
use the list to help keep you informed of collect relevant published and previously Biľak / Alan Záruba
the new fonts, special limited offers, and unpublished texts, not directed This publication presents work of 44
major updates. We never sell your email. exclusively to academic peers and Czech and Slovak designers, and focuses
Read about our privacy policy. Would you students, but to a broader audience of on the process of creating innovative

77. Bureau Advantages…
➡ No license worries
➡ No cross browser worries
➡ Reduces server strain
➡ Quality Fonts

78. What to look for in a bureau…
✓Available Fonts or Font Families
✓How Fonts are Added
✓Local Use
✓Bandwidth Usage
✓Price Structure

79. Webfont Service Bureaus
Typekit Kernest Typotheque
# Fonts 500+ 600+ 40+
families fonts families
@font-face <script> <link> <link>
Local Use ✔
Bandwidth 5-500GB Unlimited 500MB
/month /month
Price $25-250 $1-75 $100-900
/year /font/year/WS /family

80. Webfont Service Bureaus
Fontdeck WebType FontsLive
# Fonts 250+ 200+ 300+
families fonts fonts
@font-face <link> <link> <link>
Local Use ✔ ✔
Bandwidth Unlimited 1–18GB 1-18GB
month /month
Price free-$12 free-$105 $10-105
/year/font /month/font /font/year

81. Webfont Service Bureaus
Google Font API Fonts.com WebInk
# Fonts 18 7500+ 2000+
families fonts fonts
@font-face <link> <script> @font-face
Local Use ✔ ✔
Bandwidth Unlimited 12.5K–12.5G 1-80GB
pageviews/month /month
Price Free free-$500 99¢-$19.99
/month /month

82. 
CHOOSING
Webfonts

83. webfont web safe core web generic
h1
{
font-­‐family
:
diavlo,
verdana,
arial,
sans-­‐serif;
}
web safe core web generic
p
{
font-­‐family
:
cambria,
georgia,
serif;
}

84. Choose for consistency…
Select understudy fonts with similar
widths and kerning to the primary font.
Diavlo Looking Glass
Verdana
Looking Glass
Tahoma
Looking Glass

85. Choose for style availability…
Select fonts with bold, italic, and bold/
italic versions.
Baskerville
Cambria Lorem
ipsum
dolor
sit
amet,
consectetuer
Lorem ipsum dolor sit amet, consectetuer
Old Face adipiscing elit.
Nunc
ed
ligula. ellentesque
adipiscing
elit. Nunc ssed ligula.
PPellentesque
non felis
vel
lorem
tempor
ultricies.
Class
non
felis vel lorem tempor ultricies. Class
aptent taciti
sociosqu
litora torquent per
aptent
taciti sociosqu ad ad
litora
torquent
conubia nostra, per r a ,
p e i n c e p t o s
p e r
c o n u b i a
n o s t inceptosr
hymenaeos.
Vestibulum ante ipsum primis ipsum
primis
hymenaeos.
Vestibulum
ante
in faucibus orci
in
faucibus
orci
luctus
et
ultrices
posuere
luctus et ultrices posuere cubilia Curae; In hac
habitasse platea In
hac
Aenean venenatis
cubilia
Curae;
dictumst. habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
hendrerit tellus. Nunc posuere, nulla quis
Nunc
posuere,
nulla
quis
sollicitudin
sollicitudin pretium, dui mi ultricies magna, id
pretium,
dui
mi
ultricies
magna,
id
placerat
placerat lorem.
lorem.

86. Choose for legibility…
Select fonts with consistent weight and thickness
with simple, low contrast strokes and serifs.
Diavlo
Looking Glass
Weight & Thickness Strokes & Serifs
Tahoma
Looking Glass

87. Choose for readability…
Select fonts that are well balanced
between letter spacing, counter
width, letter width, & x-height.
letter spacing letter width
Tahoma
Looking Glass x-height
counter width

88. Choose for optimization…
Select fonts that have been
specifically optimized for screen
viewing.

89. Choose for consistency
style availability
legibility
readability
optimization
VOICE!!!

90. “Typographic gaffes will be readily
visible; but that should make it even
clearer when you're looking at a smart
web page or a dumb one.”
Chank Diesel
chank.com

91. 
2010
The Year of
Web Typography

92. 2011
The NEW Web Typography…
Where the Sexy is!

93. Web Typography Resources
✓Fluid Web Type
✓Nice Web Type
✓Clagnut
✓I Love Typography

94. 
www.fluidwebtype.info

95. 

96.  QUESTIONS
fluidwebtype.info/web-directions
jasonspeaking.com | @jasonspeaking