This is an updated version of my WebTypography session, shortened, less technical, and stressing more design considerations.

1. 2010
The Year of Web Typography
Jason Cranford Teague
fluidwebtypography.com
Next10
Berlin, DE | 11 May 2010

2. What do these 3
Things
have in common?

3. Flying Cars

4. Trips to Jupiter

5. Downloadable Fonts

6. 2010
3 things I was
supposed to have.

7. 2008

8. 2009

9. 2010
The Year of
Web Typography

10. 3 Things About
Jason Cranford Teague

11. Designer
Marriott

12. Author
12+ Books

13. DC Metro
Cranford Teague

14. jasonspeaking.com
@jasonspeaking

15. 3 Things About
Web Typography

16. USE
webfonts

17. FIND
webfonts

18. webtype
CHOOSE
webfonts
GET THE BOOK RECENTLY ON FWT…
Fluid Web Typography by WELCOME TO FLUID WEB TYPE!
JASON CRANFORD TEAGUE is the
only comprehensive guide to Welcome to Fluid Web Type, a new web site devoted to chronicling the SUBSCRIBE TO FWT
modern Web Typography rapidly changing world of Web Typography. Welcome Gifts To celebrate Your email:
available. Learn how to find
the site launch, I'm pleased to announce: Through February 1st, you can
more typefaces, improve Enter email address...
legibility, and increase the visual win a copy of Fluid Web Typography through Webdesigner Depot. All you
appeal of your Web designs all have to do is add a...
in one compact volume
Subscribe
available from New Riders.
Read More Unsubscribe
USING SIFR ON FWT
Main
One of the reasons that designers often site for wanting to use Flash is that,
Contact

19. Why does typography matter?
What is Web typography?

20. @fluidwebtype
fluidwebtype.info/next

21. WHY
Typography Matters

22. typography::type
voice::speech

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

24. “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

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

28. WHAT
Web Typography Is

29. NT
TEXT IN IMAGE

30. NT
TEXT IN FLASH

31. Web Typography =
HTML + CSS

32. Web Typography =
Limited Font Choices

33. design is about
overcoming
Limitations

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

35. A A A A A

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

37. yahoo.com

38. aol.com

39. msn.com

40. Web Typography =
UGLY!!!!!

41. 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
poemsoutloud.com
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

42. 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 ΣκληρόβίντεογιατηΓάζα
acidsmile.co.uk
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

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

44. Workflow and
collaboration.
Content management solutions that don't feel templated.
CONTENT MANAGEMENT SYSTEMS
DRUPAL CMS
ALFRESCO WCM
workatplay.com
TOOLBOX
The right tools for the job

45. USING
Webfonts

46. How many fonts
are there?
>100 Thousand

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

48. (Pre)Installed
OS, Software, or
Downloaded

49. Web Safe Fonts
~190 Fonts

50. Windows
~130 Fonts

51. Mac
~125 Fonts

52. Mac & Windows
59 Fonts

53. 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
Web Safe Fonts
6 Apple Chancery 2-Almost Certain
7 Apple Symbols 2-Almost Certain
8 Arial bold, italic, bold/italic 1-Certain

54. !"#$%&'()')(*#+',-*./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

55. Webfonts
Any font?

56. exljbris.com

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

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

59. File Formats
Scalable Vector Graphics
(.SVG)

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

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

62. EOT Lite or WOFF
???

64. EULA
End User License
Agreement

65. IP
Intellectual Property

66. Exljbris

67. Emigre

68. Chank

69. FINDING
Webfonts

70. Licensed Fonts
You Control

71. What to look for…
Webfont linking in EULA
Compression
Formats
Price Structure

72. What to look for…
Optimized???

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

74. 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
Linotype
of your website –
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

75. Licensed Fonts
FontSquirrel FontFont LinoType
Webfonts 560+ 100+ 600+
fonts families families
Sub-setting ✔
EOT, OTF, TTF,
Formats SVG, & WOFF
EOTLite & WOFF EOT
Price Free $80-860 Scale
family/WS font/WS

76. Webfont Service
Bureaus
Easy License &
Deployment

77. What to look for…
Compression
Local Use
Bandwidth Usage
Price Structure

78. What to look for…
Speed???

79. Limits of Webfont Services…
Do not control the CSS Code
Do not control font files
Price often a yearly license
Browser support varies

80. Typekit

81. n
My Cart: 0 items $0.00 View
Search
Fonts by
Type Style D"9%(:1*0(E%B&"'%(+(5-61#0+6$"/(?+/%,"F'
Language
Foundry
A-Z List
Web Fonts
Font Lists
Most Popular Fonts
New Releases
Fonts on Sale
Other Fonts
Resources
Newsletters
Articles
Font Services Webtype solves the 'web-safe' fonts
dilemma using premium-quality text and
Custom Fonts
headline fonts.
Ascender Fonts
Font Licensing
Eliminate the hassles and expense of using Flash,
JavaScript or image replacement techniques!
!"#$%&'()*+,"'-(./01&&(.,,(2013&%0&
Clean, readable and will render properly
Supported
Browsers 4&%(5-6%('1(7189%-(:1*0(20+8;
Use real fonts, not graphics
Support

82. Webfont Service Bureaus
Typekit Kernest Typotheque Ascender
# Fonts 800+ 600+ 40+ 200+
families fonts families fonts
Sub-setting ✔ ✔ ✔
Local Use ✔ ✔
Bandwidth 5-500GB Unlimited 500MB 1-18GB
/month /month /month
Price $25-250 $1-75 $100-900 $10-105
/year Subscription /font/year/WS /family /font/year

83. Webfont Service Bureaus
Font.com Fontdeck
# Fonts 2000+ 40+
fonts families
Sub-setting
Local Use ✔
Bandwidth ??? Unlimited
Price ??? ~$10
/year Subscription /font/year

84. CHOOSING
Webfonts

85. Choose for style…
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.
Weight & Strokes &
Thickness Serifs
Diavlo
Looking Glass
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 voice…
typography::type
voice::speech
“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

89. 2010
The Year of
Web Typography

90. QUESTIONS
jasonspeaking.com | @jasonspeaking
fluidwebtype.info/next

91. www.fluidwebtype.com