SlideShare a Scribd company logo
1 of 125
Download to read offline
fluidwebtypography




   Jason Cranford Teague
            SXSW 2010
    Austin, TX | 13 March 2010
What do these
  3 Things
 have in common?
Flying Cars
Trips to Jupiter
Downloadable Webfonts
2010
  3 things I was
supposed to have.
2008
2009
2010
  The Year of
Web Typography
3 Things to
Know About
Jason Cranford Teague
Designer
 Marriott
Author
12+ Books
DC Metro
Cranford Teague
jasonspeaking.com
  @jasonspeaking
3 Things to
Learn About
 Web Typography
USE
webfonts
FIND
webfonts
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
Why does typography matter?


  What is Web typography?
@fluidwebtype
fluidwebtype.info/sxsw
WHY
Typography Matters
typography::type


 voice::speech
If I say…
“I’m going to kill you”
“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
and A Brand BBrand
d C Brand D Brand E
and F Brand X Brand
 G Brand H Brand I
rand J Brand K Bran
Fluid Web Typography - SXSWi 2010
Fluid Web Typography - SXSWi 2010
Font
   or
Typeface
WHAT
Web Typography is
NT
TEXT IN IMAGE
NT
TEXT IN FLASH
Web Typography =
   HTML + CSS
Web Typography =
Limited Font Choices
design is about

 overcoming

Limitations
“Type design is an act of
 plagiarism in itself—you
 basically recreate the flesh
 of the same skeleton.”
                Alejandro Lo Celso Saravia
                          pampatype.com
A A A A A
What if everybody looked the same…




 …and everybody was UGLY?
font-­‐family:	
  helvetica,	
  arial,	
  sans-­‐serif;
yahoo.com
aol.com
msn.com
Web Typography =
    UGLY!!!!!
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
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
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
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
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.
Web Fonts
    or
Webfonts?
USING
Webfonts
How many fonts are
     there?
 >100 Thousand
How many fonts are
 used on the Web?
       <5 Fonts
Generic Font Families
  Core Web Fonts
  Web Safe Fonts
     Webfonts
webfont
           primary       understudy understudy
                          web-safe   core web          generic
                                                       understudy




font-­‐family:	
  diavlo,	
  garamond,	
  georgia,	
  serif;
Generic Font Family
    5 Families
Arial
            Sans-serif
 Times
              Serif
Courier
           Monospace
Zapfino
             Cursive
Curlz MT
             Fantasy
font-­‐family:	
  sans-­‐serif;
Core Web Fonts
   10 Fonts
Microsoft
Core Fonts For the
      Web
EULA
End User License
  Agreement
Andale Mono
      Arial
  Arial Black
Comic Sans MS
 Courier New
     Georgia
     Impact
Times New Roman
  Trebuchet MS
    Verdana

Arial
     Georgia
Times New Roman
  Trebuchet MS
    Verdana
font-­‐family:	
  arial,	
  sans-­‐serif;
Web Safe Fonts
 ~190 Fonts
Preinstalled
     OS or
Common Software
Windows
~130 Fonts
Mac
~125 Fonts
Mac & Windows
   59 Fonts
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
!"#$%&'()')(*#+',-*./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
font-­‐family:	
  tahoma,	
  arial,	
  sans-­‐serif;
Webfonts
Any font?
exljbris.com
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;
                  }
name you gave it



font-­‐family:	
  
                'body	
  copy',	
  tahoma,	
  arial,	
  sans-­‐serif;
File Formats
Embedded Open
  Type(.eot)
File Formats
EOT Lite (.eot)
File Formats
 True Type (.ttf)
Open Type (.otf)
File Formats
Scalable Vector
Graphics (.SVG)
File Formats
Web Open Font
Format (.woff)
EOT Lite or WOFF
       ???
EOT for IE



 @font-­‐face	
  { font-­‐family:	
  'body	
  copy';
                   src:	
  url('fonts/Diavlo_BOOK.eot');
                   src:	
  local('diavlo	
  regular'),
                                                                               Local Name
                   	
  	
  	
  	
  	
  local('diavlo-­‐regular'),
  WOFF             	
  	
  	
  	
  	
  url('fonts/Diavlo_BOOK.woff')
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  format('woff');
    SVG            	
  	
  	
  	
  	
  url('fonts/Diavlo_BOOK.svg#diavlo-­‐regular')
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  format('svg');
OTF/TTF            	
  	
  	
  	
  	
  url('fonts/Diavlo_BOOK.otf')
                   	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  format('opentype');
                   }
Fluid Web Typography - SXSWi 2010
EULA
End User License
  Agreement
IP
Intellectual Property
exljbris.com
emigre.com
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
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
chank.com
What about
sIFR & Cufón
      ?
FINDING
 Webfonts
Licensed Fonts
  You Control
What to look for…
  Webfont linking in EULA
  Subsetting
  Formats
  Cost
What to look for…




Optimized???
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
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
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
Licensed Fonts

              FontSquirrel       FontFont         LinoType


Webfonts        560+              100+             ???+
                  fonts            families        families


Sub-setting       ✔
              EOT, OTF, TTF,
 Formats      SVG, & WOFF
                               EOTLite & WOFF       EOT



   Price         Free          $80-860            Scale
                               family/page view    font/WS
Webfont Service
    Bureaus
 Easy License &
  Deployment
What to look for…
  Subsetting
  Local Use
  Bandwidth Usage
  Price Structure
What to look for…




    Speed???
Limits of Webfont Services…
 Do not control font name
 Do not control font files
 Price often a yearly license
 Browser support varies
typekit.com
<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
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
<link	
  
  href="http://kernest.com/www-speaking-in-styles-com.css"	
  
  media="screen"	
  rel="stylesheet"	
  type="text/css"	
  />
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.com
              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
<link	
  rel="stylesheet"	
  
  href="http://wf.typotheque.com/WF-­‐011405-­‐000505"	
  
  type="text/css"	
  />
6&$)4/),#),''"4#$ )    j":)*#



                        &.')%!"'(4%>2


                        6$<0&            L&+*:#&-                !"4#%-<                                           Search                           )




BECF%&GH-9%&GB%IGJB%0ED9K-E
@5')/*)4%"!%=/*6(%(2:*!6+*4;%#*=6##2;%4.<:#2%6')%/*#.6>#2%4*/8*)L




  012%&"'()*+,3                                                                        &"'()*+,%D#"=
  -1*%!"'(4%2"5%$6'(%$.(1%'"%'**)%!"/%76869+/.:(;%&#641%"/%.<6=*4                      !"#$%&'()*+)#&,-0<)-&,%<H
  !"#$%&'()*+)+$,#%,-%+)'"./0*,#$),#%),''&++*10&2)3$)4+&+),)566)78"#$98,'&)+"04$*"#    PG)BJMQJRD)PGSG
  $"):*;&)<"4)-&,0)$&=$>)?@*'@)',#)1&)+',0&%>)$-,#+0,$&%>)-&,%)"4$)0"4%),#%)A"":0&%2
  6,<):""%1<&)$")*.,:&+>)B,;,6'-*/$),#%)!0,+@)@,'(+2                                   T&E-&)'4--&#$0<)4#%&-:"*#:)$&+$*#:)*#),)/-*;,$&)1&$,2)J+)?&
                                                                                       +',0&)4/),#%),%%)$@&)8*#,0)/"0*+@>)?&E00)1&)&=$&#%*#:)*#;*$,$*"#+
  &/**%6')%*642                                                                        $"),)?*%&-),4%*&#'&2)U")V"*#)$@&)0*+$)"8)$&+$&-+>)/0&,+&)&*$@&-
  !"#$%&'()*+)8-&&)$")$-<),#%)C4*'()$")+&$)4/2)D"4E00)1&)4/),#%)-4##*#:)*#),1"4$       +*:#)4/)"#)!"#$%&'(2'".)"-)8"00"?)"4-)U?*$$&-)+$-&,.),#%)<"4
  FG)+&'"#%+H                                                                          +@"40%)@&,-)8-".)4+)*#)$@&)#&=$)8&?)?&&(+2

  -/2%6')%>52%.').8.)56#%!"'(4

  ."#&<9+,;*#:)14#%0&+2            fontdeck.comß
  5@""+&)*#%*;*%4,0)8"#$+)$")+4*$)<"4-)/-&'*+&)%&+*:#)-&C4*-&.&#$+>)"-)/4-'@,+&
                                                                                       38)<"4),-&),)(2:*%)*4.='*/)"-)?"-()8"-),)8"#$)!"5')/2>)?&E%
                                                                                       &+/&'*,00<)0";&)$")@&,-)8-".)<"42)W0&,+&)%-"/)4+),)0*#&),$
                                                                                       -*'@78"#$%&'(2'".)8"-)."-&)*#8"-.,$*"#)"#),)+/&'*,0)/-&;*&?
                                                                                       "8)!"#$%&'(>),#%)%&$,*0+)"#)@"?)$"):&$)<"4-)8"#$+)+,8&0<)"#$"
  ?*/!*+(%!"/%:/"!*44."'6#4                                                            ?&1+*$&+),'-"++)$@&)?"-0%2
  D"4)',#)$-<),#<)#4.1&-)"8)8"#$+)8"-)8-&&)"#)<"4-)0"',0).,'@*#&>)%&;&0"/.&#$
  &#;*-"#.&#$)"-)+$,:*#:)+&-;&-2)!"#$%&'()%"&+#E$)-&C4*-&)B,;,6'-*/$),#%):*;&+)<"4     XT@,$)*E.)-&,00<)&='*$&%),1"4$)*+)$@&
  '"./0&$&)80&=*1*0*$<)*#)<"4-)+&$94/2                                                 "//"-$4#*$<)$")&.1-,'&)$@&)#&?)$&'@#"0":<),#%
                                                                                       8*#,00<222X
<link	
  rel="stylesheet"	
  
  href="http://f.fontdeck.com/s/css/ngV3OuKdakbpyw/
  www.jasonspeaking.com/130.css"	
  
  type="text/css"	
  />
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
Webfont Service Bureaus

                 Typekit            Kernest        Typotheque   Ascender       Fontdeck


 # Fonts         400+               600+             40+         200+           40+
                    fonts              fonts         families      fonts         families


Sub-setting         ✔                                 ✔            ✔
Local Use                                             ✔            ✔
Bandwidth     5-500GB Unlimited                     500MB       1-18GB        Unlimited
                /month                               /month       /month


   Price      $25-250               $1-75          $100-900     $10-105         ~$10
              /year Subscription   /font/year/WS      /family    /font/year     /font/year
CHOOSING
  Webfonts
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
Choose for compatibility…
Always include webfont, Web safe,
core web, and generic typefaces in
your font stack.
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;	
  }
Choose for consistency…
    Select understudy fonts with similar
    widths and kerning to the primary font.

 Diavlo
          Looking Glass
Verdana
          Looking Glass
Tahoma
          Looking Glass
Choose for consistency…
Test all fonts in all combinations.
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.
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.
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
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
2010
  The Year of
Web Typography
QUESTIONS


     jasonspeaking.com | @jasonspeaking


fluidwebtype.info/sxsw
www.fluidwebtype.com

More Related Content

Viewers also liked

Viewers also liked (17)

Curso iniciación socialmedia Hostelería
Curso iniciación socialmedia HosteleríaCurso iniciación socialmedia Hostelería
Curso iniciación socialmedia Hostelería
 
03 Tworzenie GUI wysokiego poziomu w j2me
03 Tworzenie GUI wysokiego poziomu w j2me03 Tworzenie GUI wysokiego poziomu w j2me
03 Tworzenie GUI wysokiego poziomu w j2me
 
Petronet lng 2 qfy2011ru-261010
Petronet lng 2 qfy2011ru-261010Petronet lng 2 qfy2011ru-261010
Petronet lng 2 qfy2011ru-261010
 
Arunabha
ArunabhaArunabha
Arunabha
 
GAME24 Jen-Hsun Huang Keynote
GAME24 Jen-Hsun Huang KeynoteGAME24 Jen-Hsun Huang Keynote
GAME24 Jen-Hsun Huang Keynote
 
Libro educación expandida
Libro educación expandidaLibro educación expandida
Libro educación expandida
 
5 software recording terbaik
5 software recording terbaik5 software recording terbaik
5 software recording terbaik
 
Social Web als Innovationsquelle
Social Web als InnovationsquelleSocial Web als Innovationsquelle
Social Web als Innovationsquelle
 
Hoja de vida
Hoja de vidaHoja de vida
Hoja de vida
 
Biblioblogs Escolares
Biblioblogs EscolaresBiblioblogs Escolares
Biblioblogs Escolares
 
Como evolucionó la tecnologia educativa
Como evolucionó la tecnologia educativaComo evolucionó la tecnologia educativa
Como evolucionó la tecnologia educativa
 
How to create effective NOC in Poland
How to create effective NOC in PolandHow to create effective NOC in Poland
How to create effective NOC in Poland
 
Master en Marketing Digital, Comunicacion e Internet 3.0
Master en Marketing Digital, Comunicacion e Internet 3.0Master en Marketing Digital, Comunicacion e Internet 3.0
Master en Marketing Digital, Comunicacion e Internet 3.0
 
Tecnologia fuente de negocios en el despacho
Tecnologia fuente de negocios en el despachoTecnologia fuente de negocios en el despacho
Tecnologia fuente de negocios en el despacho
 
Bases consumopolis cat
Bases consumopolis catBases consumopolis cat
Bases consumopolis cat
 
Grp microsoft dynamics nav isesalud v2
Grp microsoft dynamics nav isesalud v2Grp microsoft dynamics nav isesalud v2
Grp microsoft dynamics nav isesalud v2
 
Juan Ponce de Leon
Juan Ponce de LeonJuan Ponce de Leon
Juan Ponce de Leon
 

More from Jason CranfordTeague

The NEW Web Typography: Where the Sexy is 2016
The NEW Web Typography: Where the Sexy is 2016The NEW Web Typography: Where the Sexy is 2016
The NEW Web Typography: Where the Sexy is 2016Jason CranfordTeague
 
Your Next UX Skill: Prototyping with HTML & CSS
Your Next UX Skill: Prototyping with HTML & CSSYour Next UX Skill: Prototyping with HTML & CSS
Your Next UX Skill: Prototyping with HTML & CSSJason CranfordTeague
 
Design Is How It Works: Prototyping the User Experience
Design Is How It Works: Prototyping the User ExperienceDesign Is How It Works: Prototyping the User Experience
Design Is How It Works: Prototyping the User ExperienceJason CranfordTeague
 
Death to Pixel Perfect Design: Prototyping for the Real World
Death to Pixel Perfect Design: Prototyping for the Real WorldDeath to Pixel Perfect Design: Prototyping for the Real World
Death to Pixel Perfect Design: Prototyping for the Real WorldJason CranfordTeague
 
Trust Me, I'm a Designer: 9 Principles for Creative Credibility
Trust Me, I'm a Designer: 9 Principles for Creative CredibilityTrust Me, I'm a Designer: 9 Principles for Creative Credibility
Trust Me, I'm a Designer: 9 Principles for Creative CredibilityJason CranfordTeague
 
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsThe NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsJason CranfordTeague
 
Design is Trust— 9 Principles For Interactive Credibility
Design is Trust— 9 Principles For Interactive CredibilityDesign is Trust— 9 Principles For Interactive Credibility
Design is Trust— 9 Principles For Interactive CredibilityJason CranfordTeague
 

More from Jason CranfordTeague (11)

The NEW Web Typography: Where the Sexy is 2016
The NEW Web Typography: Where the Sexy is 2016The NEW Web Typography: Where the Sexy is 2016
The NEW Web Typography: Where the Sexy is 2016
 
Children of the revolution
Children of the revolutionChildren of the revolution
Children of the revolution
 
Your Next UX Skill: Prototyping with HTML & CSS
Your Next UX Skill: Prototyping with HTML & CSSYour Next UX Skill: Prototyping with HTML & CSS
Your Next UX Skill: Prototyping with HTML & CSS
 
Design Is How It Works: Prototyping the User Experience
Design Is How It Works: Prototyping the User ExperienceDesign Is How It Works: Prototyping the User Experience
Design Is How It Works: Prototyping the User Experience
 
Death to Pixel Perfect Design: Prototyping for the Real World
Death to Pixel Perfect Design: Prototyping for the Real WorldDeath to Pixel Perfect Design: Prototyping for the Real World
Death to Pixel Perfect Design: Prototyping for the Real World
 
Trust Me, I'm a Designer: 9 Principles for Creative Credibility
Trust Me, I'm a Designer: 9 Principles for Creative CredibilityTrust Me, I'm a Designer: 9 Principles for Creative Credibility
Trust Me, I'm a Designer: 9 Principles for Creative Credibility
 
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsThe NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
 
Design is Trust— 9 Principles For Interactive Credibility
Design is Trust— 9 Principles For Interactive CredibilityDesign is Trust— 9 Principles For Interactive Credibility
Design is Trust— 9 Principles For Interactive Credibility
 
Fluid Web Typography - next10
Fluid Web Typography - next10Fluid Web Typography - next10
Fluid Web Typography - next10
 
Designing For Credibility
Designing For CredibilityDesigning For Credibility
Designing For Credibility
 
Web Typography 2009
Web Typography 2009Web Typography 2009
Web Typography 2009
 

Recently uploaded

second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 

Recently uploaded (20)

second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 

Fluid Web Typography - SXSWi 2010

  • 1. fluidwebtypography Jason Cranford Teague SXSW 2010 Austin, TX | 13 March 2010
  • 2. What do these 3 Things have in common?
  • 6. 2010 3 things I was supposed to have.
  • 9. 2010 The Year of Web Typography
  • 10. 3 Things to Know About Jason Cranford Teague
  • 15. 3 Things to Learn About 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
  • 19. Why does typography matter? What is Web typography?
  • 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 Brand X Brand G Brand H Brand I rand J Brand K Bran
  • 28. Font or Typeface
  • 32. Web Typography = HTML + CSS
  • 33. Web Typography = Limited Font Choices
  • 34. design is about overcoming Limitations
  • 35. “Type design is an act of plagiarism in itself—you basically recreate the flesh of the same skeleton.” Alejandro Lo Celso Saravia pampatype.com
  • 36. A A A A A
  • 37. What if everybody looked the same… …and everybody was UGLY?
  • 42. Web Typography = UGLY!!!!!
  • 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.
  • 48. Web Fonts or Webfonts?
  • 50. How many fonts are there? >100 Thousand
  • 51. How many fonts are used on the Web? <5 Fonts
  • 52. Generic Font Families Core Web Fonts Web Safe Fonts Webfonts
  • 53. webfont primary understudy understudy web-safe core web generic understudy font-­‐family:  diavlo,  garamond,  georgia,  serif;
  • 54. Generic Font Family 5 Families
  • 55. Arial Sans-serif Times Serif Courier Monospace Zapfino Cursive Curlz MT Fantasy
  • 57. Core Web Fonts 10 Fonts
  • 60. Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana 
  • 61. Arial Georgia Times New Roman Trebuchet MS Verdana
  • 63. Web Safe Fonts ~190 Fonts
  • 64. Preinstalled OS or Common Software
  • 67. Mac & Windows 59 Fonts
  • 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;
  • 77. File Formats True Type (.ttf) Open Type (.otf)
  • 79. File Formats Web Open Font Format (.woff)
  • 80. EOT Lite or WOFF ???
  • 81. EOT for IE @font-­‐face  { font-­‐family:  'body  copy'; src:  url('fonts/Diavlo_BOOK.eot'); src:  local('diavlo  regular'), Local Name          local('diavlo-­‐regular'), WOFF          url('fonts/Diavlo_BOOK.woff')                    format('woff'); SVG          url('fonts/Diavlo_BOOK.svg#diavlo-­‐regular')                    format('svg'); OTF/TTF          url('fonts/Diavlo_BOOK.otf')                    format('opentype'); }
  • 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
  • 90. What about sIFR & Cufón ?
  • 92. Licensed Fonts You Control
  • 93. What to look for… Webfont linking in EULA Subsetting Formats Cost
  • 94. What to look for… Optimized???
  • 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
  • 98. Licensed Fonts FontSquirrel FontFont LinoType Webfonts 560+ 100+ ???+ fonts families families Sub-setting ✔ EOT, OTF, TTF, Formats SVG, & WOFF EOTLite & WOFF EOT Price Free $80-860 Scale family/page view font/WS
  • 99. Webfont Service Bureaus Easy License & Deployment
  • 100. What to look for… Subsetting Local Use Bandwidth Usage Price Structure
  • 101. What to look for… Speed???
  • 102. Limits of Webfont Services… Do not control font name Do not control font files Price often a yearly license Browser support varies
  • 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
  • 106. <link   href="http://kernest.com/www-speaking-in-styles-com.css"   media="screen"  rel="stylesheet"  type="text/css"  />
  • 107. 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.com 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
  • 108. <link  rel="stylesheet"   href="http://wf.typotheque.com/WF-­‐011405-­‐000505"   type="text/css"  />
  • 109. 6&$)4/),#),''"4#$ ) j":)*# &.')%!"'(4%>2 6$<0& L&+*:#&- !"4#%-< Search ) BECF%&GH-9%&GB%IGJB%0ED9K-E @5')/*)4%"!%=/*6(%(2:*!6+*4;%#*=6##2;%4.<:#2%6')%/*#.6>#2%4*/8*)L 012%&"'()*+,3 &"'()*+,%D#"= -1*%!"'(4%2"5%$6'(%$.(1%'"%'**)%!"/%76869+/.:(;%&#641%"/%.<6=*4 !"#$%&'()*+)#&,-0<)-&,%<H !"#$%&'()*+)+$,#%,-%+)'"./0*,#$),#%),''&++*10&2)3$)4+&+),)566)78"#$98,'&)+"04$*"# PG)BJMQJRD)PGSG $"):*;&)<"4)-&,0)$&=$>)?@*'@)',#)1&)+',0&%>)$-,#+0,$&%>)-&,%)"4$)0"4%),#%)A"":0&%2 6,<):""%1<&)$")*.,:&+>)B,;,6'-*/$),#%)!0,+@)@,'(+2 T&E-&)'4--&#$0<)4#%&-:"*#:)$&+$*#:)*#),)/-*;,$&)1&$,2)J+)?& +',0&)4/),#%),%%)$@&)8*#,0)/"0*+@>)?&E00)1&)&=$&#%*#:)*#;*$,$*"#+ &/**%6')%*642 $"),)?*%&-),4%*&#'&2)U")V"*#)$@&)0*+$)"8)$&+$&-+>)/0&,+&)&*$@&- !"#$%&'()*+)8-&&)$")$-<),#%)C4*'()$")+&$)4/2)D"4E00)1&)4/),#%)-4##*#:)*#),1"4$ +*:#)4/)"#)!"#$%&'(2'".)"-)8"00"?)"4-)U?*$$&-)+$-&,.),#%)<"4 FG)+&'"#%+H +@"40%)@&,-)8-".)4+)*#)$@&)#&=$)8&?)?&&(+2 -/2%6')%>52%.').8.)56#%!"'(4 ."#&<9+,;*#:)14#%0&+2 fontdeck.comß 5@""+&)*#%*;*%4,0)8"#$+)$")+4*$)<"4-)/-&'*+&)%&+*:#)-&C4*-&.&#$+>)"-)/4-'@,+& 38)<"4),-&),)(2:*%)*4.='*/)"-)?"-()8"-),)8"#$)!"5')/2>)?&E% &+/&'*,00<)0";&)$")@&,-)8-".)<"42)W0&,+&)%-"/)4+),)0*#&),$ -*'@78"#$%&'(2'".)8"-)."-&)*#8"-.,$*"#)"#),)+/&'*,0)/-&;*&? "8)!"#$%&'(>),#%)%&$,*0+)"#)@"?)$"):&$)<"4-)8"#$+)+,8&0<)"#$" ?*/!*+(%!"/%:/"!*44."'6#4 ?&1+*$&+),'-"++)$@&)?"-0%2 D"4)',#)$-<),#<)#4.1&-)"8)8"#$+)8"-)8-&&)"#)<"4-)0"',0).,'@*#&>)%&;&0"/.&#$ &#;*-"#.&#$)"-)+$,:*#:)+&-;&-2)!"#$%&'()%"&+#E$)-&C4*-&)B,;,6'-*/$),#%):*;&+)<"4 XT@,$)*E.)-&,00<)&='*$&%),1"4$)*+)$@& '"./0&$&)80&=*1*0*$<)*#)<"4-)+&$94/2 "//"-$4#*$<)$")&.1-,'&)$@&)#&?)$&'@#"0":<),#% 8*#,00<222X
  • 110. <link  rel="stylesheet"   href="http://f.fontdeck.com/s/css/ngV3OuKdakbpyw/ www.jasonspeaking.com/130.css"   type="text/css"  />
  • 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
  • 112. Webfont Service Bureaus Typekit Kernest Typotheque Ascender Fontdeck # Fonts 400+ 600+ 40+ 200+ 40+ fonts fonts families fonts families Sub-setting ✔ ✔ ✔ Local Use ✔ ✔ Bandwidth 5-500GB Unlimited 500MB 1-18GB Unlimited /month /month /month Price $25-250 $1-75 $100-900 $10-105 ~$10 /year Subscription /font/year/WS /family /font/year /font/year
  • 114. 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
  • 115. Choose for compatibility… Always include webfont, Web safe, core web, and generic typefaces in your font stack.
  • 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
  • 118. Choose for consistency… Test all fonts in all combinations.
  • 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
  • 123. 2010 The Year of Web Typography
  • 124. QUESTIONS jasonspeaking.com | @jasonspeaking fluidwebtype.info/sxsw

Editor's Notes

  1. What do these three things have in common?
  2. What do these three things have in common?
  3. 15 Years ago: &amp;#x2022; Flying cars &amp;#x2022; Going to Jupiter &amp;#x2022; Decent Web Typography
  4. 15 Years ago: &amp;#x2022; Flying cars &amp;#x2022; Going to Jupiter &amp;#x2022; Decent Web Typography
  5. &amp;#x2022; Flying cars to easy to crash into buildings &amp;#x2022; Space program not even ready to go to the Moon &amp;#x2022; But things changed drastically last year for Web Typography&amp;#x2026;
  6. &amp;#x2022; Flying cars to easy to crash into buildings &amp;#x2022; Space program not even ready to go to the Moon &amp;#x2022; But things changed drastically last year for Web Typography&amp;#x2026;
  7. All major browsers now support some form of downloadable fonts
  8. All major browsers now support some form of downloadable fonts
  9. All major browsers now support some form of downloadable fonts
  10. All major browsers now support some form of downloadable fonts
  11. All major browsers now support some form of downloadable fonts
  12. Which is why 2010 will be remembered as the &quot;Year of Web Typography&quot;
  13. Yes, &quot;Cranford Teague&quot; is my last name.
  14. Yes, &quot;Cranford Teague&quot; is my last name.
  15. Currently the design manager for Marriott.com &amp;#x2022; Top 10 eCommerce Web site &amp;#x2022; Recently relaunched with new design &amp;#x2022; Enacting progressive Web typography
  16. Currently the design manager for Marriott.com &amp;#x2022; Top 10 eCommerce Web site &amp;#x2022; Recently relaunched with new design &amp;#x2022; Enacting progressive Web typography
  17. Currently the design manager for Marriott.com &amp;#x2022; Top 10 eCommerce Web site &amp;#x2022; Recently relaunched with new design &amp;#x2022; Enacting progressive Web typography
  18. Written over a dozen books on digital design &amp;#x2022; Speaking in Styles &amp;#x2022; Fluid Web Typography &amp;#x2022; Writing CSS Visual Quickstart Guide
  19. Written over a dozen books on digital design &amp;#x2022; Speaking in Styles &amp;#x2022; Fluid Web Typography &amp;#x2022; Writing CSS Visual Quickstart Guide
  20. Written over a dozen books on digital design &amp;#x2022; Speaking in Styles &amp;#x2022; Fluid Web Typography &amp;#x2022; Writing CSS Visual Quickstart Guide
  21. 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.
  22. 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.
  23. 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.
  24. Learn more about me from my Web site or by following me on Twitter
  25. Learn more about me from my Web site or by following me on Twitter
  26. There are three things you will come away from this session with today
  27. There are three things you will come away from this session with today
  28. The ability to USE webfonts to Create a &quot;bulletproof&quot; Font Stack using &amp;#x2022; Generic and Core Web fonts &amp;#x2022; Web Safe Fonts &amp;#x2022; Download Webfont for all current browsers
  29. The ability to USE webfonts to Create a &quot;bulletproof&quot; Font Stack using &amp;#x2022; Generic and Core Web fonts &amp;#x2022; Web Safe Fonts &amp;#x2022; Download Webfont for all current browsers
  30. The ability to USE webfonts to Create a &quot;bulletproof&quot; Font Stack using &amp;#x2022; Generic and Core Web fonts &amp;#x2022; Web Safe Fonts &amp;#x2022; Download Webfont for all current browsers
  31. The ability to FIND Webfonts from different sources including: &amp;#x2022; Font foundries &amp;#x2022; Free Webfonts &amp;#x2022; Webfont service bureaus
  32. The ability to FIND Webfonts from different sources including: &amp;#x2022; Font foundries &amp;#x2022; Free Webfonts &amp;#x2022; Webfont service bureaus
  33. The ability to FIND Webfonts from different sources including: &amp;#x2022; Font foundries &amp;#x2022; Free Webfonts &amp;#x2022; Webfont service bureaus
  34. The ability to CHOOSE the best Webfonts that establish your typographic voice
  35. The ability to CHOOSE the best Webfonts that establish your typographic voice
  36. The ability to CHOOSE the best Webfonts that establish your typographic voice
  37. First we need to answer a couple of questions
  38. First we need to answer a couple of questions
  39. To send question during this session, please Tweet to
  40. To send question during this session, please Tweet to
  41. Typography is as old as writing and has always affected written communication
  42. Typography is as old as writing and has always affected written communication
  43. Typography is to type as voice is to speech &amp;#x2022; Adds meaning beyond the words themselves &amp;#x2022; Voice can even change meaning &amp;#x2022; The fonts are a key part of typography
  44. Typography is to type as voice is to speech &amp;#x2022; Adds meaning beyond the words themselves &amp;#x2022; Voice can even change meaning &amp;#x2022; The fonts are a key part of typography
  45. Typography is to type as voice is to speech &amp;#x2022; Adds meaning beyond the words themselves &amp;#x2022; Voice can even change meaning &amp;#x2022; The fonts are a key part of typography
  46. Typography is to type as voice is to speech &amp;#x2022; Adds meaning beyond the words themselves &amp;#x2022; Voice can even change meaning &amp;#x2022; The fonts are a key part of typography
  47. Say happily Say angrily
  48. Say happily Say angrily
  49. Fonts can add their own tone of voice: &amp;#x2022; Friendly &amp;#x2022; Robotic &amp;#x2022; Crazy &amp;#x2022; Talk like Pirate
  50. Fonts can add their own tone of voice: &amp;#x2022; Friendly &amp;#x2022; Robotic &amp;#x2022; Crazy &amp;#x2022; Talk like Pirate
  51. Fonts can add their own tone of voice: &amp;#x2022; Friendly &amp;#x2022; Robotic &amp;#x2022; Crazy &amp;#x2022; Talk like Pirate
  52. Fonts can add their own tone of voice: &amp;#x2022; Friendly &amp;#x2022; Robotic &amp;#x2022; Crazy &amp;#x2022; Talk like Pirate
  53. Fonts can add their own tone of voice: &amp;#x2022; Friendly &amp;#x2022; Robotic &amp;#x2022; Crazy &amp;#x2022; Talk like Pirate
  54. Fonts can add their own tone of voice: &amp;#x2022; Friendly &amp;#x2022; Robotic &amp;#x2022; Crazy &amp;#x2022; Talk like Pirate
  55. Fonts can add their own tone of voice: &amp;#x2022; Friendly &amp;#x2022; Robotic &amp;#x2022; Crazy &amp;#x2022; Talk like Pirate
  56. Fonts can add their own tone of voice: &amp;#x2022; Friendly &amp;#x2022; Robotic &amp;#x2022; Crazy &amp;#x2022; Talk like Pirate
  57. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  58. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  59. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  60. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  61. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  62. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  63. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  64. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  65. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  66. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  67. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  68. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  69. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  70. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  71. Brands spend millions creating visual Identities Typography is a quick inexpensive way to stand out in a crowd.
  72. Fonts can help brand everything from burgers
  73. to politicians
  74. Any type used in a Web design Webfonts applied specifically to fonts being downloaded using @font-face
  75. Any type used in a Web design Webfonts applied specifically to fonts being downloaded using @font-face
  76. Any type used in a Web design Webfonts applied specifically to fonts being downloaded using @font-face
  77. To understand what Web typography is&amp;#x2026; &amp;#x2026;Let&apos;s start with what it is not.
  78. To understand what Web typography is&amp;#x2026; &amp;#x2026;Let&apos;s start with what it is not.
  79. NOT text in images
  80. NOT text in images
  81. NOT text in images
  82. NOT Flash
  83. NOT Flash
  84. NOT Flash
  85. Web typography is created with System text in HTML, styled using Cascading Style sheets.
  86. Web typography is created with System text in HTML, styled using Cascading Style sheets.
  87. Limited styles, limited controls, and most importantly limited font-family choices.
  88. Limits That&apos;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.
  89. Limits That&apos;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.
  90. 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&apos;s skin, you change what it is saying, adding another level of communication.
  91. The letter &quot;A&quot; is always two diagonal lines with a crossing horizontal line but there are many ways to do this.
  92. The letter &quot;A&quot; is always two diagonal lines with a crossing horizontal line but there are many ways to do this.
  93. The letter &quot;A&quot; is always two diagonal lines with a crossing horizontal line but there are many ways to do this.
  94. The letter &quot;A&quot; is always two diagonal lines with a crossing horizontal line but there are many ways to do this.
  95. The letter &quot;A&quot; is always two diagonal lines with a crossing horizontal line but there are many ways to do this.
  96. Twilight Zone - Eye of the Beholder Everybody is surgically altered to look the same.
  97. Twilight Zone - Eye of the Beholder Everybody is surgically altered to look the same.
  98. This may be the most common line of CSS code on the Web
  99. This may be the most common line of CSS code on the Web
  100. But when it&amp;#x2019;s all you have
  101. But when it&amp;#x2019;s all you have
  102. Everybody
  103. Everybody
  104. Looks the same
  105. Looks the same
  106. So most designers just think that Web typography is UGLY!!!
  107. So most designers just think that Web typography is UGLY!!!
  108. POL Uses &amp;#x2022; Facebuster 400 &amp;#x2022; Helvetica Neue Thin Condensed &amp;#x2022; Baskerville
  109. POL Uses &amp;#x2022; Facebuster 400 &amp;#x2022; Helvetica Neue Thin Condensed &amp;#x2022; Baskerville
  110. Acid Smile by Maria T. &amp;#x2022; Daniel
  111. Acid Smile by Maria T. &amp;#x2022; Daniel
  112. Taptaptap (Webfont): &amp;#x2022; Fertigo Pro
  113. Taptaptap (Webfont): &amp;#x2022; Fertigo Pro
  114. Work [at] Play &amp;#x2022; Netto
  115. Work [at] Play &amp;#x2022; Netto
  116. SXSW Beercamp (Typekit) &amp;#x2022; ff-enzo-web
  117. SXSW Beercamp (Typekit) &amp;#x2022; ff-enzo-web
  118. SXSW Beercamp (Typekit) &amp;#x2022; ff-enzo-web
  119. Any type used in a Web design Webfonts applied specifically to fonts being downloaded using @font-face
  120. Any type used in a Web design Webfonts applied specifically to fonts being downloaded using @font-face
  121. Any type used in a Web design Webfonts applied specifically to fonts being downloaded using @font-face
  122. Estimated that there are over 100,000 fonts available
  123. Estimated that there are over 100,000 fonts available
  124. but only 5 are commonly used on the Web, pulled from the 10 core Web fonts
  125. but only 5 are commonly used on the Web, pulled from the 10 core Web fonts
  126. 4 ways to define fonts.
  127. 4 ways to define fonts.
  128. 4 ways to define fonts.
  129. 4 ways to define fonts.
  130. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  131. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  132. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  133. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  134. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  135. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  136. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  137. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  138. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  139. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  140. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  141. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  142. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  143. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  144. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  145. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  146. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  147. add font name to the font-family list, including understudies for webfont, web safe font, core web font, and generic (in that order)
  148. The last resort, based on whatever the browser has defined
  149. The last resort, based on whatever the browser has defined
  150. What is &quot;fantasy&quot;? No one knows for sure
  151. What is &quot;fantasy&quot;? No one knows for sure
  152. What is &quot;fantasy&quot;? No one knows for sure
  153. What is &quot;fantasy&quot;? No one knows for sure
  154. What is &quot;fantasy&quot;? No one knows for sure
  155. What is &quot;fantasy&quot;? No one knows for sure
  156. What is &quot;fantasy&quot;? No one knows for sure
  157. What is &quot;fantasy&quot;? No one knows for sure
  158. What is &quot;fantasy&quot;? No one knows for sure
  159. What is &quot;fantasy&quot;? No one knows for sure
  160. Add your generic font family
  161. Add your generic font family
  162. 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.
  163. 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.
  164. The project was terminated in August 2002,
  165. The project was terminated in August 2002,
  166. The project was terminated in August 2002,
  167. 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.
  168. 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.
  169. 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- &apos;Nuff said
  170. 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- &apos;Nuff said
  171. 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- &apos;Nuff said
  172. 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- &apos;Nuff said
  173. 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- &apos;Nuff said
  174. 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- &apos;Nuff said
  175. 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- &apos;Nuff said
  176. 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- &apos;Nuff said
  177. 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- &apos;Nuff said
  178. 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- &apos;Nuff said
  179. 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- &apos;Nuff said
  180. 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- &apos;Nuff said
  181. 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- &apos;Nuff said
  182. 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- &apos;Nuff said
  183. 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- &apos;Nuff said
  184. 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- &apos;Nuff said
  185. 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- &apos;Nuff said
  186. 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- &apos;Nuff said
  187. Leaves us with 5 fonts commonly used in almost all Web sites.
  188. 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
  189. 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
  190. Between Windows OS, Mac OS, MS Office (Mac &amp; Windows) and Apple iLife
  191. Between Windows OS, Mac OS, MS Office (Mac &amp; Windows) and Apple iLife
  192. From Windows OS &amp; MS Office 2005
  193. From Windows OS &amp; MS Office 2005
  194. From Mac OS, MS Office 2008, and iLife
  195. From Mac OS, MS Office 2008, and iLife
  196. Overlap of almost 60 fonts that have a strong chance of being on both Mac and Windows
  197. Overlap of almost 60 fonts that have a strong chance of being on both Mac and Windows
  198. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  199. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  200. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  201. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  202. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  203. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  204. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  205. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  206. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  207. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  208. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  209. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  210. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  211. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  212. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  213. Websafe fonts BETA 3 Font Name Weights &amp; Styles OS - Windows, Mac, or cross (Web safe) Likelihood of availability Sample Graphic
  214. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  215. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  216. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  217. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  218. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  219. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  220. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  221. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  222. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  223. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  224. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  225. Fonts Matrix - Richard Rutter Font Name OS Installing Application, Installed Adobe CS
  226. Add one or more Websafe fonts
  227. Add one or more Websafe fonts
  228. In theory, you can download any font as a Webfont
  229. In theory, you can download any font as a Webfont
  230. and some great fonts, like diavlo, are even free!
  231. and some great fonts, like diavlo, are even free!
  232. 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
  233. 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
  234. 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
  235. 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
  236. 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
  237. 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
  238. 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
  239. 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
  240. 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
  241. 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
  242. add font name to the font-family list.
  243. add font name to the font-family list.
  244. add font name to the font-family list.
  245. add font name to the font-family list.
  246. 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
  247. 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
  248. Embedded OpenType (EOT) format with two features removed: MTX font compression URL Binding (root strings)
  249. TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. OpenType is a scalable format for computer fonts (also sometimes known interchangeably as &quot;typefaces&quot;), 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&apos;t purchase them.
  250. TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. OpenType is a scalable format for computer fonts (also sometimes known interchangeably as &quot;typefaces&quot;), 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&apos;t purchase them.
  251. TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. OpenType is a scalable format for computer fonts (also sometimes known interchangeably as &quot;typefaces&quot;), 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&apos;t purchase them.
  252. TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. OpenType is a scalable format for computer fonts (also sometimes known interchangeably as &quot;typefaces&quot;), 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&apos;t purchase them.
  253. TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe&apos;s Type 1 fonts used in PostScript. OpenType is a scalable format for computer fonts (also sometimes known interchangeably as &quot;typefaces&quot;), 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&apos;t purchase them.
  254. Scalable Vector Graphics is a vector drawing system designed for the Web. --&gt;
  255. Web Open Font Format recently developed as an answer to foundries concerns about font protection --&gt;
  256. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  257. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  258. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  259. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  260. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  261. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  262. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  263. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  264. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  265. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  266. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  267. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  268. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  269. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  270. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  271. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  272. 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 &quot;Bulletproof&quot; by Paul Irish Modified Bulletproof Avoids local() problem
  273. Fontsquirrel Font face generator can take True Type and Open type Converts to EOT Lite, SVG, and WOFF Also allows screen optimization and Subsetting
  274. All foundries have different EULAs protecting their
  275. All foundries have different EULAs protecting their
  276. Intellectual property from misappropriation.
  277. Intellectual property from misappropriation.
  278. some great fonts, like diavlo, are even free!
  279. some great fonts, like diavlo, are even free!
  280. Emigre plans to change their EULA, but hasn&apos;t yet.
  281. Emigre plans to change their EULA, but hasn&apos;t yet.
  282. Font-shop just announced support for EOT Lite and WOFF as part of their WebFontFonts
  283. Font-shop just announced support for EOT Lite and WOFF as part of their WebFontFonts
  284. Linotype - Supports EOT in EULA
  285. Linotype - Supports EOT in EULA
  286. but some foundries like Chank, are using new Webfont service bureaus To take care of licensing
  287. but some foundries like Chank, are using new Webfont service bureaus To take care of licensing
  288. Better technologies being developed sIFR - Flash Cuf&amp;#xF3;n - JavaScript - can slow down overall JavaScript performance FontSquirrel now includes Cuf&amp;#xF3;n support
  289. Better technologies being developed sIFR - Flash Cuf&amp;#xF3;n - JavaScript - can slow down overall JavaScript performance FontSquirrel now includes Cuf&amp;#xF3;n support
  290. 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: &amp;#x2022; Font foundries &amp;#x2022; Free fonts sources &amp;#x2022; New Webfont service Bureaus
  291. 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: &amp;#x2022; Font foundries &amp;#x2022; Free fonts sources &amp;#x2022; New Webfont service Bureaus
  292. Generally the highest quality fonts, but the slowest to change their EULAs
  293. Generally the highest quality fonts, but the slowest to change their EULAs
  294. Here&apos;s what to look for when considering fonts from Font Foundries
  295. Here&apos;s what to look for when considering fonts from Font Foundries
  296. Here&apos;s what to look for when considering fonts from Font Foundries
  297. Here&apos;s what to look for when considering fonts from Font Foundries
  298. Here&apos;s what to look for when considering fonts from Font Foundries
  299. The unknown quantity?
  300. FontSquirrel is the clear winner for Free Webfont sites
  301. FontSquirrel is the clear winner for Free Webfont sites
  302. Font-shop Introduced Web FontFonts
  303. Font-shop Introduced Web FontFonts
  304. Linotype - Supports EOT in EULA
  305. Linotype - Supports EOT in EULA
  306. A new concept, allowing designers to license and deploy fonts with minimal fuss
  307. A new concept, allowing designers to license and deploy fonts with minimal fuss
  308. What to look for in Webfont Service Bureaus
  309. What to look for in Webfont Service Bureaus
  310. What to look for in Webfont Service Bureaus
  311. What to look for in Webfont Service Bureaus
  312. What to look for in Webfont Service Bureaus
  313. The unknown quantity - Speed. Relying on 3rd part servers.
  314. Some of the inherent limitations of Webfont Service Bureaus include&amp;#x2026;
  315. Some of the inherent limitations of Webfont Service Bureaus include&amp;#x2026;
  316. Some of the inherent limitations of Webfont Service Bureaus include&amp;#x2026;
  317. Some of the inherent limitations of Webfont Service Bureaus include&amp;#x2026;
  318. Some of the inherent limitations of Webfont Service Bureaus include&amp;#x2026;
  319. Easy to use control panel for designers ... Makes a speed guarantee
  320. Easy to use control panel for designers ... Makes a speed guarantee
  321. Loads JavaScript to link font files from typekit server in two steps. &amp;#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&amp;#x201D; http://typekit.com/tour/scalability
  322. Loads JavaScript to link font files from typekit server in two steps. &amp;#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&amp;#x201D; http://typekit.com/tour/scalability
  323. Loads JavaScript to link font files from typekit server in two steps. &amp;#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&amp;#x201D; http://typekit.com/tour/scalability
  324. Loads JavaScript to link font files from typekit server in two steps. &amp;#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&amp;#x201D; http://typekit.com/tour/scalability
  325. Loads JavaScript to link font files from typekit server in two steps. &amp;#x201C;Your fonts will be served from a robust global network built with hundreds of servers located across North America, Europe, Australia, and Asia.&amp;#x201D; http://typekit.com/tour/scalability
  326. Kernest a lot of inexpensive and free fonts ... Interface a little tricky
  327. Kernest a lot of inexpensive and free fonts ... Interface a little tricky
  328. Links to URL to load font files from Kernest server
  329. A font foundry that will be deploying it&apos;s own fonts Good deal, but limited choices.
  330. A font foundry that will be deploying it&apos;s own fonts Good deal, but limited choices.
  331. Links to URL to load font files from Typotheque server
  332. Soon to be released ... Good price and great interface.
  333. Soon to be released ... Good price and great interface.
  334. Soon to be released ... Good price and great interface.
  335. Links to URL to load font files from Fontdeck server
  336. 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&apos;ve developed for choosing the best fonts for your designs
  337. 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&apos;ve developed for choosing the best fonts for your designs
  338. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  339. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  340. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  341. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  342. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  343. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  344. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  345. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  346. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  347. Remember, Typography is to type as voice is to speech. think carefully about how you want your message perceived and choose typefaces accordingly
  348. Include alternatives in descending order of availability
  349. Include alternatives in descending order of availability
  350. Start with webfonts and work your way down.
  351. Start with webfonts and work your way down.
  352. Start with webfonts and work your way down.
  353. Start with webfonts and work your way down.
  354. Start with webfonts and work your way down.
  355. Start with webfonts and work your way down.
  356. Start with webfonts and work your way down.
  357. Start with webfonts and work your way down.
  358. Start with webfonts and work your way down.
  359. Start with webfonts and work your way down.
  360. Start with webfonts and work your way down.
  361. Start with webfonts and work your way down.
  362. Start with webfonts and work your way down.
  363. Start with webfonts and work your way down.
  364. Especially display copy (Headlines)
  365. Especially display copy (Headlines)
  366. Especially display copy (Headlines)
  367. Especially display copy (Headlines)
  368. Especially display copy (Headlines)
  369. Especially display copy (Headlines)
  370. Especially display copy (Headlines)
  371. Especially display copy (Headlines)
  372. Especially display copy (Headlines)
  373. Especially display copy (Headlines)
  374. Especially display copy (Headlines)
  375. Once you have your fonts, make sure they work together
  376. Once you have your fonts, make sure they work together
  377. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  378. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  379. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  380. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  381. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  382. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  383. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  384. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  385. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  386. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  387. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  388. Here diavlo and tahoma have similar line lengths cambria and georgia have similar line heights As a result, they make consistent matches.
  389. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  390. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  391. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  392. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  393. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  394. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  395. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  396. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  397. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  398. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  399. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  400. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  401. Especially body copy A font without bold and italic will either appear normal or, worse, the styles will be synthesized by the browser.
  402. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  403. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  404. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  405. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  406. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  407. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  408. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  409. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  410. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  411. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  412. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  413. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  414. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  415. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  416. Especially body copy finer weights, strokes and serifs become blurry at smaller sizes.
  417. 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
  418. 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
  419. 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
  420. 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
  421. 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
  422. 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
  423. 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
  424. 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
  425. 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
  426. 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
  427. 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
  428. 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
  429. 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
  430. 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
  431. 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
  432. 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
  433. 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
  434. 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
  435. Which is why 2010 will be remembered as the &quot;Year of Web Typography&quot;
  436. Support Web site: &amp;#x2022; Links from lecture &amp;#x2022; Hand out notes &amp;#x2022; Handout of Websafe fonts Questions?
  437. Support Web site: &amp;#x2022; Links from lecture &amp;#x2022; Hand out notes &amp;#x2022; Handout of Websafe fonts Questions?
  438. Support Web site: &amp;#x2022; Links from lecture &amp;#x2022; Hand out notes &amp;#x2022; Handout of Websafe fonts Questions?
  439. Support Web site: &amp;#x2022; Links from lecture &amp;#x2022; Hand out notes &amp;#x2022; Handout of Websafe fonts Questions?
  440. Support Web site: &amp;#x2022; Links from lecture &amp;#x2022; Hand out notes &amp;#x2022; Handout of Websafe fonts Questions?
  441. Support Web site: &amp;#x2022; Links from lecture &amp;#x2022; Hand out notes &amp;#x2022; Handout of Websafe fonts Questions?
  442. Twitter Contest To enter to win a free copy of my book, visit fluidwebtype.com