Presented at SXSWi 2010
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.
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
43. 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
that would become my first book, I didn’t think of it as a book, but rather
poemsoutloud.net
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
there suffering? Where is truth? These questions would arise in me in the
Facts About the Moon
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
44. 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 ΣκληρόβίντεογιατηΓάζα
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
acidsmile.co.uk
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
45. 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
46. 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
47. B E E R C AM P
BEE
B MPP
SXSW 2010 EDITION
FOLLOW @NCLUD Emo’st.
FOLLOW @NCLUD MONDAY
FOR UPDATES
FOR UPDATES 3 Red Riv
60
er S March 15
Austin, TX T W E N T Y T E N
BEERCAMP
FOLLOW @NCLUD Festivities begins at 7:30 PM
FOR UPDATES
Emo’s
sxsw.beercamp.com
An open invitation Everyone & anyone is welcome.
TO PARTY
Open bar ’til the flotilla of kegs are kicked.
Music provided by DJ Richard Gear.
68. 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
fluidwebtype.info/ 2-Almost Certain
7 Apple Symbols web-safe-fonts 2-Almost Certain
8 Arial bold, italic, bold/italic 1-Certain
69. !"#$%&'()')(*#+',-*./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
Arno Pro
media.24ways.org/
Baskerville x x
x
2007/17/fontmatrix.html
Baskerville Old Face
Bauhaus 93
x
x
x
x
x
x
Bell Gothic Std x
Bell MT x x x
73. name you give it path to font file
@font-‐face
{ font-‐family:
'body
copy';
src:
url('fonts/Diavlo_BOOK_II_37.otf');
font-‐style:
normal;
font-‐weight:
normal;
font properties
font-‐stretch:
normal;
font-‐variant:
normal;
}
74. name you gave it
font-‐family:
'body
copy',
tahoma,
arial,
sans-‐serif;
87. 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
FontShop.com: Hubert Jocham, Castle
fontfont.com
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
88. 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 –
the Wild West
linotype.com
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
95. 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
fontsquirrel.com
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
96. 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.com/
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
97. 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.com
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
104. <script
type="text/javascript"
src="http://use.typekit.com/xcp7mcv.js">
</script>
<script
type="text/javascript">
try{Typekit.load();}catch(e){}
</script>
<style>
h1
{
font-‐family:
"coquette-‐1","coquette-‐2",fantasy;
}
</style>
font name 1 font name 2
105. STYLES: SERIF - SANS SERIF - SCRIPT Find by Style or Tag CHARACTER SETS - FAMILIES - FOUNDRIES - DESIGNERS - HOW IT WORKS
KERNEST.COM / Web Fonts Delivered.
Welcome to Kernest. I'm
Vegur-R from Dot Colon
size 80 px color black background white word spacing px letter spacing px line height 140 %
kernest.com
Vegur-R from Dot Colon * Compare
DOT COLON’S VEGUR-R USE ON YOUR WEBSITE FOR - FREE
Last Seen at COMMERCIAL USE PERMITTED.
Email
111. 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.
ascenderfonts.com
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
116. webfont web safe core web generic
h1
{
font-‐family
:
diavlo,
tahoma,
arial,
sans-‐serif;
}
web safe core web generic
p
{
font-‐family
:
cambria,
georgia,
serif;
}
117. Choose for consistency…
Select understudy fonts with similar
widths and kerning to the primary font.
Diavlo
Looking Glass
Verdana
Looking Glass
Tahoma
Looking Glass
119. h1
{
font-‐family
:
diavlo,
tahoma,
arial,
sans-‐serif;
}
p
{
font-‐family
:
cambria,
georgia,
serif;
}
Looking Glass
Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
per
conubia
nostra,
per
inceptos
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.
120. Choose for style…
Select fonts with bold, italic, and bold/
italic versions.
Cambria Lorem
ipsum
dolor
sit
amet,
consectetuer
adipiscing
elit.
Nunc
sed
ligula.
Pellentesque
non
felis
vel
lorem
tempor
ultricies.
Class
aptent
taciti
sociosqu
ad
litora
torquent
p e r
c o n u b i a
n o s t r a ,
p e r
i n c e p t o s
hymenaeos.
Vestibulum
ante
ipsum
primis
in
faucibus
orci
luctus
et
ultrices
posuere
cubilia
Curae;
In
hac
habitasse
platea
dictumst.
Aenean
venenatis
hendrerit
tellus.
Nunc
posuere,
nulla
quis
sollicitudin
pretium,
dui
mi
ultricies
magna,
id
placerat
lorem.
121. 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
122. 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
15 Years ago:
&#x2022; Flying cars
&#x2022; Going to Jupiter
&#x2022; Decent Web Typography
15 Years ago:
&#x2022; Flying cars
&#x2022; Going to Jupiter
&#x2022; Decent Web Typography
&#x2022; Flying cars to easy to crash into buildings
&#x2022; Space program not even ready to go to the Moon
&#x2022; But things changed drastically last year for Web Typography&#x2026;
&#x2022; Flying cars to easy to crash into buildings
&#x2022; Space program not even ready to go to the Moon
&#x2022; But things changed drastically last year for Web Typography&#x2026;
All major browsers now support some form of downloadable fonts
All major browsers now support some form of downloadable fonts
All major browsers now support some form of downloadable fonts
All major browsers now support some form of downloadable fonts
All major browsers now support some form of downloadable fonts
Which is why 2010 will be remembered as the
"Year of Web Typography"
Yes, "Cranford Teague" is my last name.
Yes, "Cranford Teague" is my last name.
Currently the design manager for Marriott.com
&#x2022; Top 10 eCommerce Web site
&#x2022; Recently relaunched with new design
&#x2022; Enacting progressive Web typography
Currently the design manager for Marriott.com
&#x2022; Top 10 eCommerce Web site
&#x2022; Recently relaunched with new design
&#x2022; Enacting progressive Web typography
Currently the design manager for Marriott.com
&#x2022; Top 10 eCommerce Web site
&#x2022; Recently relaunched with new design
&#x2022; Enacting progressive Web typography
Written over a dozen books on digital design
&#x2022; Speaking in Styles
&#x2022; Fluid Web Typography
&#x2022; Writing CSS Visual Quickstart Guide
Written over a dozen books on digital design
&#x2022; Speaking in Styles
&#x2022; Fluid Web Typography
&#x2022; Writing CSS Visual Quickstart Guide
Written over a dozen books on digital design
&#x2022; Speaking in Styles
&#x2022; Fluid Web Typography
&#x2022; Writing CSS Visual Quickstart Guide
Living outside of DC with 2 kids, 2 cats, but just the one wife. We have Big Love, but not that kind of big love.
Living outside of DC with 2 kids, 2 cats, but just the one wife. We have Big Love, but not that kind of big love.
Living outside of DC with 2 kids, 2 cats, but just the one wife. We have Big Love, but not that kind of big love.
Learn more about me from my Web site or by following me on Twitter
Learn more about me from my Web site or by following me on Twitter
There are three things you will come away from this session with today
There are three things you will come away from this session with today
The ability to USE webfonts to Create a "bulletproof" Font Stack using
&#x2022; Generic and Core Web fonts
&#x2022; Web Safe Fonts
&#x2022; Download Webfont for all current browsers
The ability to USE webfonts to Create a "bulletproof" Font Stack using
&#x2022; Generic and Core Web fonts
&#x2022; Web Safe Fonts
&#x2022; Download Webfont for all current browsers
The ability to USE webfonts to Create a "bulletproof" Font Stack using
&#x2022; Generic and Core Web fonts
&#x2022; Web Safe Fonts
&#x2022; Download Webfont for all current browsers
The ability to FIND Webfonts from different sources including:
&#x2022; Font foundries
&#x2022; Free Webfonts
&#x2022; Webfont service bureaus
The ability to FIND Webfonts from different sources including:
&#x2022; Font foundries
&#x2022; Free Webfonts
&#x2022; Webfont service bureaus
The ability to FIND Webfonts from different sources including:
&#x2022; Font foundries
&#x2022; Free Webfonts
&#x2022; Webfont service bureaus
The ability to CHOOSE the best Webfonts that
establish your typographic voice
The ability to CHOOSE the best Webfonts that
establish your typographic voice
The ability to CHOOSE the best Webfonts that
establish your typographic voice
First we need to answer a couple of questions
First we need to answer a couple of questions
To send question during this session, please Tweet to
To send question during this session, please Tweet to
Typography is as old as writing and has always affected written communication
Typography is as old as writing and has always affected written communication
Typography is to type as voice is to speech
&#x2022; Adds meaning beyond the words themselves
&#x2022; Voice can even change meaning
&#x2022; The fonts are a key part of typography
Typography is to type as voice is to speech
&#x2022; Adds meaning beyond the words themselves
&#x2022; Voice can even change meaning
&#x2022; The fonts are a key part of typography
Typography is to type as voice is to speech
&#x2022; Adds meaning beyond the words themselves
&#x2022; Voice can even change meaning
&#x2022; The fonts are a key part of typography
Typography is to type as voice is to speech
&#x2022; Adds meaning beyond the words themselves
&#x2022; Voice can even change meaning
&#x2022; The fonts are a key part of typography
Say happily
Say angrily
Say happily
Say angrily
Fonts can add their own tone of voice:
&#x2022; Friendly
&#x2022; Robotic
&#x2022; Crazy
&#x2022; Talk like Pirate
Fonts can add their own tone of voice:
&#x2022; Friendly
&#x2022; Robotic
&#x2022; Crazy
&#x2022; Talk like Pirate
Fonts can add their own tone of voice:
&#x2022; Friendly
&#x2022; Robotic
&#x2022; Crazy
&#x2022; Talk like Pirate
Fonts can add their own tone of voice:
&#x2022; Friendly
&#x2022; Robotic
&#x2022; Crazy
&#x2022; Talk like Pirate
Fonts can add their own tone of voice:
&#x2022; Friendly
&#x2022; Robotic
&#x2022; Crazy
&#x2022; Talk like Pirate
Fonts can add their own tone of voice:
&#x2022; Friendly
&#x2022; Robotic
&#x2022; Crazy
&#x2022; Talk like Pirate
Fonts can add their own tone of voice:
&#x2022; Friendly
&#x2022; Robotic
&#x2022; Crazy
&#x2022; Talk like Pirate
Fonts can add their own tone of voice:
&#x2022; Friendly
&#x2022; Robotic
&#x2022; Crazy
&#x2022; Talk like Pirate
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Brands spend millions creating visual Identities
Typography is a quick inexpensive way to stand out in a crowd.
Fonts can help brand everything from burgers
to politicians
Any type used in a Web design
Webfonts applied specifically to fonts being downloaded using @font-face
Any type used in a Web design
Webfonts applied specifically to fonts being downloaded using @font-face
Any type used in a Web design
Webfonts applied specifically to fonts being downloaded using @font-face
To understand what Web typography is&#x2026;
&#x2026;Let's start with what it is not.
To understand what Web typography is&#x2026;
&#x2026;Let's start with what it is not.
NOT text in images
NOT text in images
NOT text in images
NOT Flash
NOT Flash
NOT Flash
Web typography is created with System text in HTML,
styled using Cascading Style sheets.
Web typography is created with System text in HTML,
styled using Cascading Style sheets.
Limited styles, limited controls, and most importantly limited font-family choices.
Limits
That's what design is about
Design is about overcoming the limits of the medium.
I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
Limits
That's what design is about
Design is about overcoming the limits of the medium.
I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
Step Inside Design May/June 2008
When you choose your font, you do not change the meaning of the letter.. a A is still a A, but by changing it's skin, you change what it is saying, adding another level of communication.
The letter "A" is always two diagonal lines with a crossing horizontal line
but there are many ways to do this.
The letter "A" is always two diagonal lines with a crossing horizontal line
but there are many ways to do this.
The letter "A" is always two diagonal lines with a crossing horizontal line
but there are many ways to do this.
The letter "A" is always two diagonal lines with a crossing horizontal line
but there are many ways to do this.
The letter "A" is always two diagonal lines with a crossing horizontal line
but there are many ways to do this.
Twilight Zone - Eye of the Beholder
Everybody is surgically altered to look the same.
Twilight Zone - Eye of the Beholder
Everybody is surgically altered to look the same.
This may be the most common line of CSS code on the Web
This may be the most common line of CSS code on the Web
But when it&#x2019;s all you have
But when it&#x2019;s all you have
Everybody
Everybody
Looks the same
Looks the same
So most designers just think that Web typography is UGLY!!!
So most designers just think that Web typography is UGLY!!!
POL Uses
&#x2022; Facebuster 400
&#x2022; Helvetica Neue Thin Condensed
&#x2022; Baskerville
POL Uses
&#x2022; Facebuster 400
&#x2022; Helvetica Neue Thin Condensed
&#x2022; Baskerville
Acid Smile by Maria T.
&#x2022; Daniel
Acid Smile by Maria T.
&#x2022; Daniel
Taptaptap (Webfont):
&#x2022; Fertigo Pro
Taptaptap (Webfont):
&#x2022; Fertigo Pro
Work [at] Play
&#x2022; Netto
Work [at] Play
&#x2022; Netto
SXSW Beercamp (Typekit)
&#x2022; ff-enzo-web
SXSW Beercamp (Typekit)
&#x2022; ff-enzo-web
SXSW Beercamp (Typekit)
&#x2022; ff-enzo-web
Any type used in a Web design
Webfonts applied specifically to fonts being downloaded using @font-face
Any type used in a Web design
Webfonts applied specifically to fonts being downloaded using @font-face
Any type used in a Web design
Webfonts applied specifically to fonts being downloaded using @font-face
Estimated that there are over 100,000 fonts available
Estimated that there are over 100,000 fonts available
but only 5 are commonly used on the Web, pulled from the 10 core Web fonts
but only 5 are commonly used on the Web, pulled from the 10 core Web fonts
4 ways to define fonts.
4 ways to define fonts.
4 ways to define fonts.
4 ways to define fonts.
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
add font name to the font-family list, including understudies for
webfont, web safe font, core web font, and generic (in that order)
The last resort, based on whatever the browser has defined
The last resort, based on whatever the browser has defined
What is "fantasy"? No one knows for sure
What is "fantasy"? No one knows for sure
What is "fantasy"? No one knows for sure
What is "fantasy"? No one knows for sure
What is "fantasy"? No one knows for sure
What is "fantasy"? No one knows for sure
What is "fantasy"? No one knows for sure
What is "fantasy"? No one knows for sure
What is "fantasy"? No one knows for sure
What is "fantasy"? No one knows for sure
Add your generic font family
Add your generic font family
We use these because they are almost certain to be installed on all computers in use today.
BUT there are other fonts that we can rely on to be installed depending on the operating system.
We use these because they are almost certain to be installed on all computers in use today.
BUT there are other fonts that we can rely on to be installed depending on the operating system.
The project was terminated in August 2002,
The project was terminated in August 2002,
The project was terminated in August 2002,
The project was terminated allegedly due to frequent EULA violations.[1] However, that same EULA allows
redistribution if the packages are kept in their original format and filenames and not used to add value to commercial products.
The project was terminated allegedly due to frequent EULA violations.[1] However, that same EULA allows
redistribution if the packages are kept in their original format and filenames and not used to add value to commercial products.
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Although there were 10 fonts in the original list
Andale Mono no longer installed with Windows,
Webdings does not work in many browsers
Impact and Arial black - primarily display fonts for headlines
Courier New - Monospace
Comic Sans- 'Nuff said
Leaves us with 5 fonts commonly used in almost all Web sites.
Add the core web font next
Only used because the perception is that is all that is commonly available
but many fonts are pre-installed from variety of sources
Add the core web font next
Only used because the perception is that is all that is commonly available
but many fonts are pre-installed from variety of sources
Between Windows OS, Mac OS, MS Office (Mac & Windows) and Apple iLife
Between Windows OS, Mac OS, MS Office (Mac & Windows) and Apple iLife
From Windows OS & MS Office 2005
From Windows OS & MS Office 2005
From Mac OS, MS Office 2008, and iLife
From Mac OS, MS Office 2008, and iLife
Overlap of almost 60 fonts that have a strong chance of being on both Mac and Windows
Overlap of almost 60 fonts that have a strong chance of being on both Mac and Windows
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Websafe fonts BETA 3
Font Name
Weights & Styles
OS - Windows, Mac, or cross (Web safe)
Likelihood of availability
Sample Graphic
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Fonts Matrix - Richard Rutter
Font Name
OS
Installing Application, Installed
Adobe CS
Add one or more Websafe fonts
Add one or more Websafe fonts
In theory, you can download any font as a Webfont
In theory, you can download any font as a Webfont
and some great fonts, like diavlo, are even free!
and some great fonts, like diavlo, are even free!
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
add font name to the font-family list.
add font name to the font-family list.
add font name to the font-family list.
add font name to the font-family list.
Embedded Open Type over 11 years old, supported in Internet Explorer since version 4
Provides some copy protection
difficult to convert from standard font formats
Embedded Open Type over 11 years old, supported in Internet Explorer since version 4
Provides some copy protection
difficult to convert from standard font formats
Embedded OpenType (EOT) format with two features removed:
MTX font compression
URL Binding (root strings)
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript.
OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems.
BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them.
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript.
OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems.
BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them.
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript.
OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems.
BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them.
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript.
OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems.
BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them.
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript.
OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems.
BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them.
Scalable Vector Graphics is a vector drawing system designed for the Web.
-->
Web Open Font Format recently developed as an answer to foundries concerns about font protection
-->
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
The syntax for downloading fonts for use by CSS has been around for years.
I can place this file on my server, and use @font-face in my CSS to download it
"Bulletproof" by Paul Irish
Modified Bulletproof
Avoids local() problem
Fontsquirrel Font face generator can take True Type and Open type
Converts to EOT Lite, SVG, and WOFF
Also allows screen optimization and Subsetting
All foundries have different EULAs protecting their
All foundries have different EULAs protecting their
Intellectual property from misappropriation.
Intellectual property from misappropriation.
some great fonts, like diavlo, are even free!
some great fonts, like diavlo, are even free!
Emigre plans to change their EULA, but hasn't yet.
Emigre plans to change their EULA, but hasn't yet.
Font-shop just announced support for EOT Lite and WOFF as part of their WebFontFonts
Font-shop just announced support for EOT Lite and WOFF as part of their WebFontFonts
Linotype - Supports EOT in EULA
Linotype - Supports EOT in EULA
but some foundries like Chank, are using new Webfont service bureaus
To take care of licensing
but some foundries like Chank, are using new Webfont service bureaus
To take care of licensing
Better technologies being developed
sIFR - Flash
Cuf&#xF3;n - JavaScript - can slow down overall JavaScript performance
FontSquirrel now includes Cuf&#xF3;n support
Better technologies being developed
sIFR - Flash
Cuf&#xF3;n - JavaScript - can slow down overall JavaScript performance
FontSquirrel now includes Cuf&#xF3;n support
So how do you know where to find legally usable fonts?
The landscape is constantly changing, but I want to share with you what you should be looking for
in three places many of us will find webfonts:
&#x2022; Font foundries
&#x2022; Free fonts sources
&#x2022; New Webfont service Bureaus
So how do you know where to find legally usable fonts?
The landscape is constantly changing, but I want to share with you what you should be looking for
in three places many of us will find webfonts:
&#x2022; Font foundries
&#x2022; Free fonts sources
&#x2022; New Webfont service Bureaus
Generally the highest quality fonts, but the slowest to change their EULAs
Generally the highest quality fonts, but the slowest to change their EULAs
Here's what to look for when considering fonts from Font Foundries
Here's what to look for when considering fonts from Font Foundries
Here's what to look for when considering fonts from Font Foundries
Here's what to look for when considering fonts from Font Foundries
Here's what to look for when considering fonts from Font Foundries
The unknown quantity?
FontSquirrel is the clear winner for Free Webfont sites
FontSquirrel is the clear winner for Free Webfont sites
Font-shop Introduced Web FontFonts
Font-shop Introduced Web FontFonts
Linotype - Supports EOT in EULA
Linotype - Supports EOT in EULA
A new concept, allowing designers to license and deploy fonts with minimal fuss
A new concept, allowing designers to license and deploy fonts with minimal fuss
What to look for in Webfont Service Bureaus
What to look for in Webfont Service Bureaus
What to look for in Webfont Service Bureaus
What to look for in Webfont Service Bureaus
What to look for in Webfont Service Bureaus
The unknown quantity - Speed. Relying on 3rd part servers.
Some of the inherent limitations of Webfont Service Bureaus include&#x2026;
Some of the inherent limitations of Webfont Service Bureaus include&#x2026;
Some of the inherent limitations of Webfont Service Bureaus include&#x2026;
Some of the inherent limitations of Webfont Service Bureaus include&#x2026;
Some of the inherent limitations of Webfont Service Bureaus include&#x2026;
Easy to use control panel for designers
...
Makes a speed guarantee
Easy to use control panel for designers
...
Makes a speed guarantee
Loads JavaScript to link font files from typekit server in two steps.
&#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D;
http://typekit.com/tour/scalability
Loads JavaScript to link font files from typekit server in two steps.
&#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D;
http://typekit.com/tour/scalability
Loads JavaScript to link font files from typekit server in two steps.
&#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D;
http://typekit.com/tour/scalability
Loads JavaScript to link font files from typekit server in two steps.
&#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D;
http://typekit.com/tour/scalability
Loads JavaScript to link font files from typekit server in two steps.
&#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&#x201D;
http://typekit.com/tour/scalability
Kernest a lot of inexpensive and free fonts
...
Interface a little tricky
Kernest a lot of inexpensive and free fonts
...
Interface a little tricky
Links to URL to load font files from Kernest server
A font foundry that will be deploying it's own fonts
Good deal, but limited choices.
A font foundry that will be deploying it's own fonts
Good deal, but limited choices.
Links to URL to load font files from Typotheque server
Soon to be released
...
Good price and great interface.
Soon to be released
...
Good price and great interface.
Soon to be released
...
Good price and great interface.
Links to URL to load font files from Fontdeck server
Once you know how to use and find webfonts, choosing the right ones should be a snap, right?
Here are a few best practices I've developed for choosing the best fonts for your designs
Once you know how to use and find webfonts, choosing the right ones should be a snap, right?
Here are a few best practices I've developed for choosing the best fonts for your designs
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Remember, Typography is to type as voice is to speech.
think carefully about how you want your message perceived and choose typefaces accordingly
Include alternatives in descending order of availability
Include alternatives in descending order of availability
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Start with webfonts and work your way down.
Especially display copy (Headlines)
Especially display copy (Headlines)
Especially display copy (Headlines)
Especially display copy (Headlines)
Especially display copy (Headlines)
Especially display copy (Headlines)
Especially display copy (Headlines)
Especially display copy (Headlines)
Especially display copy (Headlines)
Especially display copy (Headlines)
Especially display copy (Headlines)
Once you have your fonts, make sure they work together
Once you have your fonts, make sure they work together
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Here diavlo and tahoma have similar line lengths
cambria and georgia have similar line heights
As a result, they make consistent matches.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
A font without bold and italic will either appear normal or, worse,
the styles will be synthesized by the browser.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
finer weights, strokes and serifs become blurry at smaller sizes.
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Especially body copy
More space, wider counters and widths, and taller x-height generally make copy easier to read
however, look for a good balance to make sure the font is also engaging to read
Which is why 2010 will be remembered as the
"Year of Web Typography"
Support Web site:
&#x2022; Links from lecture
&#x2022; Hand out notes
&#x2022; Handout of Websafe fonts
Questions?
Support Web site:
&#x2022; Links from lecture
&#x2022; Hand out notes
&#x2022; Handout of Websafe fonts
Questions?
Support Web site:
&#x2022; Links from lecture
&#x2022; Hand out notes
&#x2022; Handout of Websafe fonts
Questions?
Support Web site:
&#x2022; Links from lecture
&#x2022; Hand out notes
&#x2022; Handout of Websafe fonts
Questions?
Support Web site:
&#x2022; Links from lecture
&#x2022; Hand out notes
&#x2022; Handout of Websafe fonts
Questions?
Support Web site:
&#x2022; Links from lecture
&#x2022; Hand out notes
&#x2022; Handout of Websafe fonts
Questions?
Twitter Contest
To enter to win a free copy of my book, visit fluidwebtype.com