SlideShare a Scribd company logo
1 of 147
Download to read offline
THENEWWEB
TYPOGRAPHY
WHERE THE SEXY IS




JASON CRANFORD TEAGUE
                                     @
jasonspeaking.com | @jasonspeaking
forumone.com | @forumone


                                     edUi | 14 September 2011
LET'S GO 
WHAT IS
 SEXY?
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
folha de s. paulo newspaper
WEB
TYPOGRAPHY=
HTML + CSS = SEXY?
WEB
BORING
TYPOGRAPHY=
HTML + CSS = SEXY?
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
SO…
What's been the problem?
Q1
HOW MANY FONTS ARE THERE?


1,500,000
150,000
15,000
1,500
150K

DIGITAL FONTS
Q2
HOW MANY FONTS ARE
COMMONLY USED ON THE WEB?

18
11
10
5
Q2
HOW MANY FONTS ARE
COMMONLY USED ON THE WEB?

18
11
10
5
Q2
HOW MANY FONTS ARE
COMMONLY USED ON THE WEB?

18
11
10
5
Andale Mono




11
                 Arial
                 Arial Black

                 Comic Sans MS
                 Courier New
                 Georgia
                 Impact


 f               Times New Roman




!
                 Trebuchet MS
CORE WEB FONTS   Verdana
                 
If Fonts Were Dogs…




                      fuckyeahdementia.com
Andale Mono




11
                 Arial
                 Arial Black

                 Comic Sans MS
                 Courier New
                 Georgia
                 Impact


 f               Times New Roman




!
                 Trebuchet MS
CORE WEB FONTS   Verdana
                 
115              Andale Mono
                 Arial
                 Arial Black

                 Comic Sans MS
                 Courier New
                 Georgia
                 Impact


 f               Times New Roman




!
                 Trebuchet MS
CORE WEB FONTS   Verdana
                 
Verdana
                   Georgia
Trebuchet MS
                   Arial
     Times New Roman
Arial
Georgia
Times New Roman
Trebuchet MS
Verdana
The NEW Web Typography: Where the Sexy Is
A A A A A A
 A A A A A A
  A A A A A
 A A A A    A
and A Brand BBrand
  C Brand D Brand E
  Brand X
and F         Brand
  G Brand H Brand I
rand J Brand K Bran
d S Brand R Brand T
typography::type
voice::speech
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
SO…
Where are the fonts on the web?
182
!
f
WEB SAFE FONTS
Windows & Mac Fonts
66
!
f
WEB SAFE FONTS
Common Denominator
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                                       2-Almost Certain




7 Apple Symbols                                        2-Almost Certain



8 Arial                  bold, italic, bold/italic     1-Certain
@ 2008



Safari Supports TTF & OTF Formats
@  2008
        2009


All Browsers Support Webfonts
@  2008
       2009
      2010
The Year of Web Typography
@   2008
    2009
   2010
2011
Web Typography is Sexy
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
40K
@
WEBFONTS
WHERE DO
WEBFONTS COME
FROM?

@             @    $    @ ⎋
    convert       buy   lease
@
THENEWWEB
TYPOGRAPHY


WEBTYPE
BASICS
LET'S GO 
WHAT IS A
WEBFONT?
WEBFONT
or web font

                 e space
        notice th
WEBFONT
Font file downloaded from a web
server and used by the browser to
render HTML text.
WEBFONTS



 Your
 your                 Your Computer
            font
           font-file
Server
server      file
YOUR FONT

             web
             page
                       User's Computer

 your
server    @font-face



            font-file
5
@
WEBFONT FILE FORMATS
BROWSER WEBFONT


 EOT      ✔4
TTF/OTF        ✔ 3.5   ✔ 3.1        ✔ 10
 SVG                   ✔ 3.1   ✔3   ✔ 10
 WOFF     ✔9   ✔ 3.6    ?      ✔6   ✔ 11
MOBILE WEBFONT


  EOT

 TTF/OTF   ✔ 4.2   ✔ 2.2   ✔6
  SVG      ✔ 3.1
  WOFF
WEBFONTS
           .eot file
            font-file




           .ttf/.otf
           font-file
              file
 Your
 your
Server
server
                       Your Computer
            font-file
           .svg file




            .wo
           font-file
             file
BUILDING A
FONTSTACK
Adding a webfont
Star      generic
                understudy
font-family:%'gill%sans%MT',%arial,%sans-serif;
Websafe     generic
               core web
font-family:%'gill%sans%MT',%arial,%sans-serif;
/fonts
  myfont-webfont.eot
  myfont-webfont.otf
  myfont-webfont.svg
  myfont-webfont.woff
name you give it

@font-face%{ font-family:%Diavlo;
             src:%url('fonts/Diavlo_BOOK_II_37.otf');
             }


path to font file
name you give it

@font-face%{ font-family:%'body%copy';
             src:%url('fonts/Diavlo_BOOK_II_37.otf');
             }


path to font file
name you give it ?# fixes IE

@font-face%{ font-family:%'body%copy';
             src:%url('myfont-webfont.eot');
             src:%url('myfont-webfont.eot?#iefix')%
             %%%%%%%%%%format('embedded-opentype'),%
             %   %url('myfont-webfont.woff')%format('woff'),%
             %   %url('myfont-webfont.ttf')%%format('truetype'),
             %   %url('myfont-webfont.svg#webfontFqDaNIX6')%
             %%%%%%%%%%format('svg');
             }
name you gave it

      font-family:%diavlo,%'gill%sans%MT',%arial,%sans-serif;
name you gave it

      font-family:%
                  'body%copy',%'gill%sans%MT',%arial,%sans-serif;
@font-face%{ font-family:%'body%copy%bold';
             src:%url('myfont-bold-bold-webfont.eot');%
             src:%url('myfont-bold-webfont.eot?#iefix')%
             %%%%%%%%format('embedded-opentype'),%
             %   %url('myfont-bold-webfont.woff')%format('woff'),%
             %   %url('myfont-bold-webfont.ttf')%%format('truetype'),
             %   %url('myfont-bold-webfont.svg#webfontFqDaNIX6')%
             %%%%%%%%format('svg');
             }
@font-face%{ font-family:%'body%copy';
             src:%url('myfont-bold-webfont.eot');%
             src:%url('myfont-bold-webfont.eot?#iefix')%
             %%%%%%%%format('embedded-opentype'),%
             %   %url('myfont-bold-webfont.woff')%format('woff'),%
             %   %url('myfont-bold-webfont.ttf')%%format('truetype'),
             %   %url('myfont-bold-webfont.svg#webfontFqDaNIX6')%
             %%%%%%%%format('svg');
             font-weight:%bold;
             font-style:%normal;
             }
@font-face%{ font-family:%'body%copy';
             src:%url('myfont-webfont.eot');%
             src:%url('myfont-webfont.eot?#iefix')%
             %%%%%%%%format('embedded-opentype'),%
             %   %url('myfont-webfont.woff')%format('woff'),%
             %   %url('myfont-webfont.ttf')%%format('truetype'),
             font-weight:%bold;
             font-style:%normal;
             }
@font%face,{ font%family:,'body,copy';
             src:,url('myfont%webfont.eot');,
             src:,url('myfont%webfont.eot?#iefix'),
             ,,,,,,,,format('embedded%opentype'),,
             ,    ,url('myfont%webfont.woff'),format('woff'),,
             ,    ,url('myfont%webfont.ttf'),,format('truetype'),
             font%weight:,normal;
             font%style:,normal;
             }


@font%face,{ font%family:,'body,copy';
             src:,url('myfont%bold%webfont.eot');,
             src:,url('myfont%bold%webfont.eot?#iefix'),
             ,,,,,,,,format('embedded%opentype'),,
             ,    ,url('myfont%bold%webfont.woff'),format('woff'),,
             ,    ,url('myfont%bold%webfont.ttf'),,format('truetype'),
             font%weight:,bold;
             font%style:,normal;
             }

@font%face,{ font%family:,'body,copy';
             src:,url('myfont%italic%webfont.eot');,
             src:,url('myfont%italic%webfont.eot?#iefix'),
             ,,,,,,,,format('embedded%opentype'),,
             ,    ,url('myfont%italic%webfont.woff'),format('woff'),,
             ,    ,url('myfont%italic%webfont.ttf'),,format('truetype'),
             font%weight:,normal;
             font%style:,italic;
             }
WHERE DO I
     FIND
WEBFONTS?
CONVERT, BUY OR
LEASE?
CONVERT, BUY OR
LEASE?
conversion — YOUR FONT
retailers — YOUR FONT
web font service bureaus — THEIR FONT
YOUR FONT

             web
             page
                       User's Computer

 your
server    @font-face



            font-file
THEIR FONT

                web
 your           page
server                     User's Computer

          @font-face, <link>
             JavaScript

WFSB
server         font-file
CONVERT?        @
➡Any Font
➡You control quality
➡You control the code
➡Sub-setting
EULA
End User License Agreement
IP
Intellectual Property
LOOKING FOR… @
➡ EULA? Are you breaking the law?
➡Server load?
➡Screen Quality?
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
BUY?        @   $
✓ One Time Price
✓ Desktop Use
✓ Unlimited Domains
✓ Unlimited Page Views
✓ Many are free
LOOKING FOR…         @   $
✓ Webfont linking in EULA
✓Compression
✓ Formats
✓ Price Structure
RETAILERS                                                                   @                $
RETAILER
              FontSquirrell          FontSpring                            MyFonts                Kernest
                                                        FontShop

Webfonts         660                 1800+               100+             37,296                  2543
                families              families           families            fonts               famalies


 Subset          ✔                     ✔                  ✔
           eot, otf, ttf, svg &
 Formats          woff
                                eot, ttf, svg & woff   eot & woff     eot, ttf, svg & woff eot, ttf, svg & woff


  Price          Free               $80-860            Free-$100         $10-$160              free–$15
                                        /ws                /ws               /font                 /font


  URL       fontsquirrell.com      fontspring.com      fontshop.com      myfonts.com            kernest.com
LEASE?           @   ⎋
➡ No license worries
➡ No cross browser worries
➡ Reduces server strain
➡ Quality Fonts
LOOKING FOR… @                 ⎋
✓Available Fonts or Font Families
✓How Fonts are Added
✓Local Use
✓Bandwidth Usage
✓Price Structure
@
WEBFONT SERVICE BUREAUS                                                                                   ⎋
  WFSB
               Google Web Fonts         fonts.com          WebInk        FontDeck          WebType


 Webfonts          150+               10,000+              2283            735             580+
                   families               fonts             fonts         families          families

                                      <js> or
  Embed           <link>                                @font-face      <link>            <link>
                                     @font-face
   Local            ✔                    ✔                                                  ✔
  Subset            ✔                    ✔                 ✔                                ✔
 Bandwidth      Unlimited            25K–12.5M           1–80GB            1M           250K–2.5M
                                    pageviews/month        month      pageviews/month   pageviews/month


  Billing          Free              Free–$500          99¢–$59.99    $2.50–19.99        $40–400
                                     unlimited/month     4ws/month       font/year         font/yeat


   URL       google.com/webfonts   webfonts.fonts.com    webink.com    fontdeck.com      webtype.com
@
WEBFONT SERVICE BUREAUS                                                                                 ⎋
  WFSB
                FontsLive          Typekit          Kernest        Typotheque          Typonine


 Webfonts         499              4000             2503              40                 20
                  fonts             fonts            fonts          families           families

              <js> or                                            <link> or
  Embed                           <js>            <link>                              <link>
             @font-face                                          @font-face
   Local          ✔                                 ✔                ✔                  ✔
  Subset          ✔                ✔                                 ✔                  ✔
 Bandwidth   250K–12.5M          25K–1M          Unlimited        Unlimited           500MB
             pageviews/month   pageviews/month                                       /month free


  Billing    $40–$2,000        Free–$99.99       Free–$15         $100–900               €2
              unlimited/year        /year        /font/year/ws       /family      additional GB/month


   URL       fontslive.com      typekit.com      kernest.com     typotheque.com     typonine.com
The NEW Web Typography: Where the Sexy Is
HOW DO I
  CHOOSE
WEBFONTS?
choose for   REPERTOIRE…
choose for      STYLES…
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&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         STYLES…
Baskerville
Old Face      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   OPTIMIZATION…
choose for   COMPATIBILITY…
choose for   LEGIBILITY…

  Diavlo
           Looking Glass
              Weight & Thickness   Strokes & Serifs
 Tahoma
           Looking Glass
choose for   LEGIBILITY…


Slab Serif
choose for        READABILITY…

            letter spacing                   letter width


   Tahoma
            Looking Glass                                   x-height



                             counter width
choose for   REPERTOIRE
             STYLES
             OPTIMIZATION
             COMPATIBILITY
             LEGIBILITY
             READIBLITY
VOICE!!!
typography::type
voice::speech
The NEW Web Typography: Where the Sexy Is
A A A A A A
 A A A A A A
  A A A A A
 A A A A    A
and A Brand BBrand
  C Brand D Brand E
  Brand X
and F         Brand
  G Brand H Brand I
rand J Brand K Bran
d S Brand R Brand T
IF I SAY…
“I’m going to kill you”
“I’m going to kill you”
       Suave = Cooper Black



“I’m going to kill you”
       Robotic = Synchro LET




“I’m going to kill you”
        Insane = Sybil Green



 “I’m going to kill you”
          Pirate = UglyQua
HOW DO I
   MAKE WEB
TYPOGRAPHY
      SEXY?
use   CONTRAST…



High Color Contrast
use   CONTRAST…



Low Color Contrast
use   CONTRAST…



Mixed Color Contrast
use   CONTRAST…



      Stylecontrast
use   CONTRAST…



      widthContrast
use   CONTRAST…



  TypefaceContrast
use   CONTRAST…



      multiContrast
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
use   SPACE…

      Looking-Glass house
      One thing was certain, that the white kitten had
      had nothing to do with it:--it was the black
      kitten's fault entirely. For the white kitten had
      been having its face washed by the old cat for
      the last quarter of an hour (and bearing it
      pretty well, considering); so you see that it
      couldn't have had any hand in the mischief.
use   SPACE
      Looking-Glass house

      One thing was certain, that the white kitten
      had had nothing to do with it:--it was the
      black kitten's fault entirely. For the white
      kitten had been having its face washed by
      the old cat for the last quarter of an hour
      (and bearing it pretty well, considering);
      so you see that it couldn't have had any
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
use   SCALE…


        LARGE
           small
The NEW Web Typography: Where the Sexy Is
use   TEXTURE…



      Drop Shadow
use   TEXTURE…



Emboss or Bevel
The NEW Web Typography: Where the Sexy Is
use   CONSISTENT
      VARIATION…
The NEW Web Typography: Where the Sexy Is
MAKE IT SEXY…
forumone.com
fluidwebtype.info
THENEWWEB
TYPOGRAPHY

       QUESTIONS               @
 jasonspeaking.com | me@jasonspeaking.com | @jasonspeaking
THANKS!

www.jasonspeaking.com
me@jasonspeaking.com
@jasonspeaking

More Related Content

Viewers also liked

Innovative Packaging Design
Innovative Packaging DesignInnovative Packaging Design
Innovative Packaging DesignLisa Rodwell
 
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
 
Typography Essentials: Part 2
Typography Essentials: Part 2Typography Essentials: Part 2
Typography Essentials: Part 2Jennifer Janviere
 
Art Directed Web Typography
Art Directed Web TypographyArt Directed Web Typography
Art Directed Web TypographyMarko Dugonjić
 
Transformative Design Project 2 Presentation
Transformative Design Project 2 PresentationTransformative Design Project 2 Presentation
Transformative Design Project 2 PresentationS. Song
 
Practical Typography
Practical TypographyPractical Typography
Practical Typographyvictorloux
 
The State of Web Typography
The State of Web TypographyThe State of Web Typography
The State of Web TypographyDerek Bender
 
Typography: Gestalt Word Illustrations
Typography: Gestalt Word IllustrationsTypography: Gestalt Word Illustrations
Typography: Gestalt Word IllustrationsMohamed Eldib
 
Introduction to METAMORPHOSIS
Introduction to METAMORPHOSISIntroduction to METAMORPHOSIS
Introduction to METAMORPHOSISMurray Ansell
 
Metamorphosis Slideshow
Metamorphosis SlideshowMetamorphosis Slideshow
Metamorphosis Slideshowsammenheuser
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Jasmine Vesque
 
Beautiful Web Typography: 7 tips on de-sucking the web
Beautiful Web Typography: 7 tips on de-sucking the webBeautiful Web Typography: 7 tips on de-sucking the web
Beautiful Web Typography: 7 tips on de-sucking the webPascal Klein
 
Elegant Web Typography
Elegant Web TypographyElegant Web Typography
Elegant Web Typographyjeff_croft
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web DesignSara Cannon
 
Presentation Skills for Teachers version 3.0
Presentation Skills for Teachers  version 3.0Presentation Skills for Teachers  version 3.0
Presentation Skills for Teachers version 3.0Simon Jones
 

Viewers also liked (20)

Innovative Packaging Design
Innovative Packaging DesignInnovative Packaging Design
Innovative Packaging Design
 
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
 
Typography Essentials: Part 2
Typography Essentials: Part 2Typography Essentials: Part 2
Typography Essentials: Part 2
 
Art Directed Web Typography
Art Directed Web TypographyArt Directed Web Typography
Art Directed Web Typography
 
Transformative Design Project 2 Presentation
Transformative Design Project 2 PresentationTransformative Design Project 2 Presentation
Transformative Design Project 2 Presentation
 
Typography - More than Just Words
Typography - More than Just WordsTypography - More than Just Words
Typography - More than Just Words
 
Practical Typography
Practical TypographyPractical Typography
Practical Typography
 
The State of Web Typography
The State of Web TypographyThe State of Web Typography
The State of Web Typography
 
Typography: Gestalt Word Illustrations
Typography: Gestalt Word IllustrationsTypography: Gestalt Word Illustrations
Typography: Gestalt Word Illustrations
 
Introduction to METAMORPHOSIS
Introduction to METAMORPHOSISIntroduction to METAMORPHOSIS
Introduction to METAMORPHOSIS
 
Metamorphosis Slideshow
Metamorphosis SlideshowMetamorphosis Slideshow
Metamorphosis Slideshow
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
 
Beautiful Web Typography: 7 tips on de-sucking the web
Beautiful Web Typography: 7 tips on de-sucking the webBeautiful Web Typography: 7 tips on de-sucking the web
Beautiful Web Typography: 7 tips on de-sucking the web
 
Elegant Web Typography
Elegant Web TypographyElegant Web Typography
Elegant Web Typography
 
It's all about typography
It's all about typographyIt's all about typography
It's all about typography
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web Design
 
Typography ppt
Typography pptTypography ppt
Typography ppt
 
Presentation Skills for Teachers version 3.0
Presentation Skills for Teachers  version 3.0Presentation Skills for Teachers  version 3.0
Presentation Skills for Teachers version 3.0
 
Packaging design ppt
Packaging design pptPackaging design ppt
Packaging design ppt
 
5 Reasons Typography is Powerful
5 Reasons Typography is Powerful5 Reasons Typography is Powerful
5 Reasons Typography is Powerful
 

Similar to The NEW Web Typography: Where the Sexy Is

Employing Custom Fonts
Employing Custom FontsEmploying Custom Fonts
Employing Custom FontsPaul Irish
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fontsFour Kitchens
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?Greg Veen
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbookFour Kitchens
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography TipsSara Cannon
 
Web Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenWeb Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenMark Wubben
 
Font embedding for the web
Font embedding for the webFont embedding for the web
Font embedding for the webWojtek Zając
 
To Hell with Web Safe Fonts
To Hell with Web Safe FontsTo Hell with Web Safe Fonts
To Hell with Web Safe FontsLennart Schoors
 
The Professional Font Kit.docx
The Professional Font Kit.docxThe Professional Font Kit.docx
The Professional Font Kit.docxSalA56
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsYves Van Goethem
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typographyFour Kitchens
 
Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02F Blanco
 
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)Beautiful Web Typography (#5)
Beautiful Web Typography (#5)Pascal Klein
 

Similar to The NEW Web Typography: Where the Sexy Is (20)

Employing Custom Fonts
Employing Custom FontsEmploying Custom Fonts
Employing Custom Fonts
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fonts
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?
 
What the @font-face
What the @font-faceWhat the @font-face
What the @font-face
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbook
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
 
Web Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenWeb Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp Copenhagen
 
Font embedding for the web
Font embedding for the webFont embedding for the web
Font embedding for the web
 
Responsive Web Fonts
Responsive Web FontsResponsive Web Fonts
Responsive Web Fonts
 
The State of Web Type
The State of Web TypeThe State of Web Type
The State of Web Type
 
To Hell with Web Safe Fonts
To Hell with Web Safe FontsTo Hell with Web Safe Fonts
To Hell with Web Safe Fonts
 
(Web ) Typography
(Web ) Typography(Web ) Typography
(Web ) Typography
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
The Professional Font Kit.docx
The Professional Font Kit.docxThe Professional Font Kit.docx
The Professional Font Kit.docx
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typography
 
Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02
 
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
 
Web Typography
Web TypographyWeb Typography
Web Typography
 

More from Jason 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
 
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 (9)

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

VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Recently uploaded (20)

VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

The NEW Web Typography: Where the Sexy Is

  • 1. THENEWWEB TYPOGRAPHY WHERE THE SEXY IS JASON CRANFORD TEAGUE @ jasonspeaking.com | @jasonspeaking forumone.com | @forumone edUi | 14 September 2011
  • 19. folha de s. paulo newspaper
  • 30. Q1 HOW MANY FONTS ARE THERE? 1,500,000 150,000 15,000 1,500
  • 32. Q2 HOW MANY FONTS ARE COMMONLY USED ON THE WEB? 18 11 10 5
  • 33. Q2 HOW MANY FONTS ARE COMMONLY USED ON THE WEB? 18 11 10 5
  • 34. Q2 HOW MANY FONTS ARE COMMONLY USED ON THE WEB? 18 11 10 5
  • 35. Andale Mono 11 Arial Arial Black Comic Sans MS Courier New Georgia Impact f Times New Roman ! Trebuchet MS CORE WEB FONTS Verdana 
  • 36. If Fonts Were Dogs… fuckyeahdementia.com
  • 37. Andale Mono 11 Arial Arial Black Comic Sans MS Courier New Georgia Impact f Times New Roman ! Trebuchet MS CORE WEB FONTS Verdana 
  • 38. 115 Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact f Times New Roman ! Trebuchet MS CORE WEB FONTS Verdana 
  • 39. Verdana Georgia Trebuchet MS Arial Times New Roman
  • 42. A A A A A A A A A A A A A A A A A A A A A A
  • 43. and A Brand BBrand C Brand D Brand E Brand X and F Brand G Brand H Brand I rand J Brand K Bran d S Brand R Brand T
  • 48. SO… Where are the fonts on the web?
  • 51. 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 2-Almost Certain 7 Apple Symbols 2-Almost Certain 8 Arial bold, italic, bold/italic 1-Certain
  • 52. @ 2008 Safari Supports TTF & OTF Formats
  • 53. @ 2008 2009 All Browsers Support Webfonts
  • 54. @ 2008 2009 2010 The Year of Web Typography
  • 55. @ 2008 2009 2010 2011 Web Typography is Sexy
  • 60. WHERE DO WEBFONTS COME FROM? @ @ $ @ ⎋ convert buy lease
  • 64. WEBFONT or web font e space notice th
  • 65. WEBFONT Font file downloaded from a web server and used by the browser to render HTML text.
  • 66. WEBFONTS Your your Your Computer font font-file Server server file
  • 67. YOUR FONT web page User's Computer your server @font-face font-file
  • 69. BROWSER WEBFONT EOT ✔4 TTF/OTF ✔ 3.5 ✔ 3.1 ✔ 10 SVG ✔ 3.1 ✔3 ✔ 10 WOFF ✔9 ✔ 3.6 ? ✔6 ✔ 11
  • 70. MOBILE WEBFONT EOT TTF/OTF ✔ 4.2 ✔ 2.2 ✔6 SVG ✔ 3.1 WOFF
  • 71. WEBFONTS .eot file font-file .ttf/.otf font-file file Your your Server server Your Computer font-file .svg file .wo font-file file
  • 73. Star generic understudy font-family:%'gill%sans%MT',%arial,%sans-serif;
  • 74. Websafe generic core web font-family:%'gill%sans%MT',%arial,%sans-serif;
  • 75. /fonts myfont-webfont.eot myfont-webfont.otf myfont-webfont.svg myfont-webfont.woff
  • 76. name you give it @font-face%{ font-family:%Diavlo; src:%url('fonts/Diavlo_BOOK_II_37.otf'); } path to font file
  • 77. name you give it @font-face%{ font-family:%'body%copy'; src:%url('fonts/Diavlo_BOOK_II_37.otf'); } path to font file
  • 78. name you give it ?# fixes IE @font-face%{ font-family:%'body%copy'; src:%url('myfont-webfont.eot'); src:%url('myfont-webfont.eot?#iefix')% %%%%%%%%%%format('embedded-opentype'),% % %url('myfont-webfont.woff')%format('woff'),% % %url('myfont-webfont.ttf')%%format('truetype'), % %url('myfont-webfont.svg#webfontFqDaNIX6')% %%%%%%%%%%format('svg'); }
  • 79. name you gave it font-family:%diavlo,%'gill%sans%MT',%arial,%sans-serif;
  • 80. name you gave it font-family:% 'body%copy',%'gill%sans%MT',%arial,%sans-serif;
  • 81. @font-face%{ font-family:%'body%copy%bold'; src:%url('myfont-bold-bold-webfont.eot');% src:%url('myfont-bold-webfont.eot?#iefix')% %%%%%%%%format('embedded-opentype'),% % %url('myfont-bold-webfont.woff')%format('woff'),% % %url('myfont-bold-webfont.ttf')%%format('truetype'), % %url('myfont-bold-webfont.svg#webfontFqDaNIX6')% %%%%%%%%format('svg'); }
  • 82. @font-face%{ font-family:%'body%copy'; src:%url('myfont-bold-webfont.eot');% src:%url('myfont-bold-webfont.eot?#iefix')% %%%%%%%%format('embedded-opentype'),% % %url('myfont-bold-webfont.woff')%format('woff'),% % %url('myfont-bold-webfont.ttf')%%format('truetype'), % %url('myfont-bold-webfont.svg#webfontFqDaNIX6')% %%%%%%%%format('svg'); font-weight:%bold; font-style:%normal; }
  • 83. @font-face%{ font-family:%'body%copy'; src:%url('myfont-webfont.eot');% src:%url('myfont-webfont.eot?#iefix')% %%%%%%%%format('embedded-opentype'),% % %url('myfont-webfont.woff')%format('woff'),% % %url('myfont-webfont.ttf')%%format('truetype'), font-weight:%bold; font-style:%normal; }
  • 84. @font%face,{ font%family:,'body,copy'; src:,url('myfont%webfont.eot');, src:,url('myfont%webfont.eot?#iefix'), ,,,,,,,,format('embedded%opentype'),, , ,url('myfont%webfont.woff'),format('woff'),, , ,url('myfont%webfont.ttf'),,format('truetype'), font%weight:,normal; font%style:,normal; } @font%face,{ font%family:,'body,copy'; src:,url('myfont%bold%webfont.eot');, src:,url('myfont%bold%webfont.eot?#iefix'), ,,,,,,,,format('embedded%opentype'),, , ,url('myfont%bold%webfont.woff'),format('woff'),, , ,url('myfont%bold%webfont.ttf'),,format('truetype'), font%weight:,bold; font%style:,normal; } @font%face,{ font%family:,'body,copy'; src:,url('myfont%italic%webfont.eot');, src:,url('myfont%italic%webfont.eot?#iefix'), ,,,,,,,,format('embedded%opentype'),, , ,url('myfont%italic%webfont.woff'),format('woff'),, , ,url('myfont%italic%webfont.ttf'),,format('truetype'), font%weight:,normal; font%style:,italic; }
  • 85. WHERE DO I FIND WEBFONTS?
  • 87. CONVERT, BUY OR LEASE? conversion — YOUR FONT retailers — YOUR FONT web font service bureaus — THEIR FONT
  • 88. YOUR FONT web page User's Computer your server @font-face font-file
  • 89. THEIR FONT web your page server User's Computer @font-face, <link> JavaScript WFSB server font-file
  • 90. CONVERT? @ ➡Any Font ➡You control quality ➡You control the code ➡Sub-setting
  • 93. LOOKING FOR… @ ➡ EULA? Are you breaking the law? ➡Server load? ➡Screen Quality?
  • 96. BUY? @ $ ✓ One Time Price ✓ Desktop Use ✓ Unlimited Domains ✓ Unlimited Page Views ✓ Many are free
  • 97. LOOKING FOR… @ $ ✓ Webfont linking in EULA ✓Compression ✓ Formats ✓ Price Structure
  • 98. RETAILERS @ $ RETAILER FontSquirrell FontSpring MyFonts Kernest FontShop Webfonts 660 1800+ 100+ 37,296 2543 families families families fonts famalies Subset ✔ ✔ ✔ eot, otf, ttf, svg & Formats woff eot, ttf, svg & woff eot & woff eot, ttf, svg & woff eot, ttf, svg & woff Price Free $80-860 Free-$100 $10-$160 free–$15 /ws /ws /font /font URL fontsquirrell.com fontspring.com fontshop.com myfonts.com kernest.com
  • 99. LEASE? @ ⎋ ➡ No license worries ➡ No cross browser worries ➡ Reduces server strain ➡ Quality Fonts
  • 100. LOOKING FOR… @ ⎋ ✓Available Fonts or Font Families ✓How Fonts are Added ✓Local Use ✓Bandwidth Usage ✓Price Structure
  • 101. @ WEBFONT SERVICE BUREAUS ⎋ WFSB Google Web Fonts fonts.com WebInk FontDeck WebType Webfonts 150+ 10,000+ 2283 735 580+ families fonts fonts families families <js> or Embed <link> @font-face <link> <link> @font-face Local ✔ ✔ ✔ Subset ✔ ✔ ✔ ✔ Bandwidth Unlimited 25K–12.5M 1–80GB 1M 250K–2.5M pageviews/month month pageviews/month pageviews/month Billing Free Free–$500 99¢–$59.99 $2.50–19.99 $40–400 unlimited/month 4ws/month font/year font/yeat URL google.com/webfonts webfonts.fonts.com webink.com fontdeck.com webtype.com
  • 102. @ WEBFONT SERVICE BUREAUS ⎋ WFSB FontsLive Typekit Kernest Typotheque Typonine Webfonts 499 4000 2503 40 20 fonts fonts fonts families families <js> or <link> or Embed <js> <link> <link> @font-face @font-face Local ✔ ✔ ✔ ✔ Subset ✔ ✔ ✔ ✔ Bandwidth 250K–12.5M 25K–1M Unlimited Unlimited 500MB pageviews/month pageviews/month /month free Billing $40–$2,000 Free–$99.99 Free–$15 $100–900 €2 unlimited/year /year /font/year/ws /family additional GB/month URL fontslive.com typekit.com kernest.com typotheque.com typonine.com
  • 104. HOW DO I CHOOSE WEBFONTS?
  • 105. choose for REPERTOIRE…
  • 106. choose for STYLES… 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&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.
  • 107. choose for STYLES… Baskerville Old Face 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.
  • 108. choose for OPTIMIZATION…
  • 109. choose for COMPATIBILITY…
  • 110. choose for LEGIBILITY… Diavlo Looking Glass Weight & Thickness Strokes & Serifs Tahoma Looking Glass
  • 111. choose for LEGIBILITY… Slab Serif
  • 112. choose for READABILITY… letter spacing letter width Tahoma Looking Glass x-height counter width
  • 113. choose for REPERTOIRE STYLES OPTIMIZATION COMPATIBILITY LEGIBILITY READIBLITY
  • 117. A A A A A A A A A A A A A A A A A A A A A A
  • 118. and A Brand BBrand C Brand D Brand E Brand X and F Brand G Brand H Brand I rand J Brand K Bran d S Brand R Brand T
  • 119. IF I SAY… “I’m going to kill you”
  • 120. “I’m going to kill you” Suave = Cooper Black “I’m going to kill you” Robotic = Synchro LET “I’m going to kill you” Insane = Sybil Green “I’m going to kill you” Pirate = UglyQua
  • 121. HOW DO I MAKE WEB TYPOGRAPHY SEXY?
  • 122. use CONTRAST… High Color Contrast
  • 123. use CONTRAST… Low Color Contrast
  • 124. use CONTRAST… Mixed Color Contrast
  • 125. use CONTRAST… Stylecontrast
  • 126. use CONTRAST… widthContrast
  • 127. use CONTRAST… TypefaceContrast
  • 128. use CONTRAST… multiContrast
  • 132. use SPACE… Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief.
  • 133. use SPACE Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any
  • 136. use SCALE… LARGE small
  • 138. use TEXTURE… Drop Shadow
  • 139. use TEXTURE… Emboss or Bevel
  • 141. use CONSISTENT VARIATION…
  • 146. THENEWWEB TYPOGRAPHY QUESTIONS @ jasonspeaking.com | me@jasonspeaking.com | @jasonspeaking