{ Many Types, Many Faces}
W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a




                 ...
{ Many Types, Many Faces}
W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a




                 ...
{ Many Types, Many Faces}
W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a




                 ...
3 Options
CSS Typography =
CSS Typography =

Limited Font
Choices
limits
design is about




limits
design is about

 overcoming


limits
“Type Design is an act of
 plagiarism in itself—you
 basically recreate the
 flesh of the same
 skeleton.”
                ...
How many fonts are there?
How many fonts are there?


>100K Fonts
How many fonts are there
on the Web?
How many fonts are there
on the Web?

3 Fonts
Arial   Times   Georgia
Arial
Helvetica
Arial
Helvetica
ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
           0123456789
Times
Times New Roman
Times
Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
            0123456789
Georgia
Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
            0123456789
Verdana

Trebuchet MS
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ
  abcdefghijklmnopqrstuvwxyz
         0123456789

Trebuchet MS
  ABCDEFGHIJKLMNOPQRSTUV...
Andale Mono
Arial Black
Courier New
Comic Sans MS
Impact

Core Web Fonts
Core Web Fonts
Core Web Fonts


11 Fonts
EULA
EULA
End-User License Agreement
Installed Fonts
Windows XP
Windows XP

+9 Fonts
   Franklin Gothic Medium
   Lucid Console
   Lucida Sans Unicode
   Marlett
   Microsoft Sans Serif
...
Windows Vista
Windows Vista

+7 Fonts
   Calibri
   Cambria
   Candara
   Consolas
   Constantia
   Corbel
   Segoe UI
Mac OS X
Mac OS X

+31 Fonts
American
                   Courier          Monaco
Typewriter
                   Didot            Opt...
Apple iLife
Apple iLife

+13 Fonts
 Academy Engraved        Palatino
 Bank Gothic             Portago
 BlairMDITC TT           Santa F...
Microso Office 2007
Microso Office 2007

+121 Fonts
Microso Office: Mac 2008
Microso Office: Mac 2008

  +72 Fonts
MS Office:
Mac & Windows
MS Office:
Mac & Windows

62 Fonts
Web Safe Fonts
Windows
Windows


148 Fonts
Mac
Mac


134 Fonts
Mac & Windows
Mac & Windows


73 Fonts
Mac & Windows
Mac & Windows


    Wide Latin
Web Safe Fonts
Web Safe Fonts


~180 Fonts
100,000 - 180
      =
100,000 - 180
             Still Not a Lot
      =
Diavlo
www.josbuivenga.demon.nl
...}
@font-face
{
font-family: Diavlo;
@font-face
{        src: url(’Diavlo_BOOK_II_37.otf’);
         }
Name you give it.


         font-family: Diavlo;
@font-face
{        src: url(’Diavlo_BOOK_II_37.otf’);
         }
Name you give it.


         font-family: Diavlo;
@font-face
{        src: url(’Diavlo_BOOK_II_37.otf’);
         }
      ...
font-      georgia, times, “times new roman”, serif;
family :
Font-family name you give it.



 font-         diavlo, georgia, times, “times new roman”, serif;
 family :
Download
Download Fonts
Download Fonts


 Unlimited Fonts
File Format
File Formats
File Formats

True Type
Open Type
IP
IP
Intellectual Property
EULA
EULA
End-User License Agreement
File Formats
File Formats

Embedded
Open Type (.eot)
.ttf
.ttf


v3.1
.ttf
.ttf


Coming Soon
.ttf
.ttf


??????????
So...
Download Fonts

   Web Safe Fonts

  Core Web Fonts

Generic Font-families
h1 {

 font-family : diavlo, georgia, times, “times new roman”,




p{

 font-family : corbel, verdana, arial, helvetica, ...
Download Fonts


h1 {

 font-family : diavlo, georgia, times, “times new roman”,




p{

 font-family : corbel, verdana, a...
Download Fonts


h1 {

 font-family : diavlo, georgia, times, “times new roman”,


       Web Safe Fonts

p{

 font-family...
Download Fonts


h1 {

 font-family : diavlo, georgia, times, “times new roman”,


       Web Safe Fonts   Core Web Fonts
...
Download Fonts


h1 {

 font-family : diavlo, georgia, times, “times new roman”,


       Web Safe Fonts   Core Web Fonts ...
h1 {

 font-family : diavlo, georgia, times, “times new roman”,

p{

 font-family : corbel, verdana, helvetica, arial, san...
h1 {

 font-family : diavlo, georgia, times, “times new roman”,

p{

 font-family : corbel, verdana, helvetica, arial, san...
h1 {

 font-family : diavlo, georgia, times, “times new roman”,

p{

 font-family : corbel, verdana, helvetica, arial, san...
h1 {

 font-family : diavlo, georgia, times, “times new roman”,

p{

 font-family : corbel, verdana, helvetica, arial, san...
h1 {

 font-family : diavlo, georgia, times, “times new roman”,

p{

 font-family : corbel, verdana, helvetica, arial, san...
h1 {

 font-family : diavlo, georgia, times, “times new roman”,

p{

 font-family : corbel, verdana, helvetica, arial, san...
h1 {

 font-family : diavlo, georgia, times, “times new roman”,

p{

 font-family : corbel, verdana, helvetica, arial, san...
design is about

 overcoming


limits
Fluid
Typography
Choosing
Your Fonts
If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as


h1 {

 font-fam...
If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
      Download Fo...
If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
      Download Fo...
If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
      Download Fo...
If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
      Download Fo...
For headline copy use fonts with
similar widths and kerning.



    Web Typography
For headline copy use fonts with
similar widths and kerning.



    Web Typography
For body copy select fonts with
bold, italic, and bold/italic versions.
For body copy select fonts with
bold, italic, and bold/italic versions.

         Lorem ipsum dolor sit amet, consectetuer...
For body copy select fonts with
bold, italic, and bold/italic versions.

         Lorem ipsum dolor sit amet, consectetuer...
For body copy select fonts with
bold, italic, and bold/italic versions.

         Lorem ipsum dolor sit amet, consectetuer...
Test the different fonts in different
combinations.

         Web Typography
         Lorem ipsum dolor sit amet, consecte...
Test the different fonts in different
combinations.

         Web Typography
         Lorem ipsum dolor sit amet, consecte...
{ Web                          Beyond A r i a l and T i m e s and G e o r g i a

jason cranford teague
  www.speaking-in-s...
www.speaking-in-styles.com/web-typography
{ Many Types, Many Faces}
 W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a




                ...
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Web Typography
Upcoming SlideShare
Loading in...5
×

Web Typography

4,841

Published on

Are you tired of using the same old fonts in your Web designs? The type you use can say as much to your audience as the actual words on the page, but until now, Web designers have had an extremely limited palette of fonts from which to choose—essentially, Arial (yawn), Times (yawn), and Georgia (yawwwwwn). Design is about overcoming the limitations of a medium, and Web design is no different. In this session, Jason will show you how to use fluid typography, browser-safe fonts, and type on images to create robust scalable designs to achieve great typography without resorting to typing in images or Adobe Flash. You’ll also learn how to use CSS to download any font you want to use in your Web designs, and to use downloadable fonts, despite the limitations of some browsers.

Published in: Design, Technology, Art & Photos
1 Comment
16 Likes
Statistics
Notes
  • great presso, though when I tried downloading it saved the download as some wird kind of registery file. Not sure if I can convert it to it's readable format.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,841
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
337
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide











  • Using Flash
  • text in images


  • and HTML Text

  • Authentic
  • Good

  • But we all know that if you want to be the Favorite Web Site Award winner, you have to use flash.
  • ...

    Limited styles, limited controls, and most importantly limited font-family choices.
  • Limits
    That's what design is about

    Design is about overcoming the limits of the medium.

    I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
  • Limits
    That's what design is about

    Design is about overcoming the limits of the medium.

    I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
  • Step Inside Design May/June 2008

    When you choose your font, you do not change the meaning of the letter.. a T is still a T, but by changing it's skin, you change what it is saying, adding another level of communication.
  • Twilight Zone - Eye of the Beholder
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=

  • with CSS, we can not only declare a single font, but back-up fonts and generic font families.

    If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
  • with CSS, we can not only declare a single font, but back-up fonts and generic font families.

    If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
  • http://www.truetype-typography.com/articles/times.htm

  • Georgia is a transitional serif typeface designed in 1993[1] by Matthew Carter

    and hinted by Tom Rickner for the Microsoft Corporation, as the serif companion to the first Microsoft sans serif screen font, Verdana. The initial version of the font was released on November 1, 1996 as part of the Core fonts for the Web collection. Later, it was bundled with Internet Explorer 4.0 supplemental font pack.

    http://en.wikipedia.org/wiki/Georgia_%28typeface%29
  • Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter).

    http://en.wikipedia.org/wiki/Verdana
  • Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter).

    http://en.wikipedia.org/wiki/Verdana


  • webdings

  • Core fonts for the Web was a project begun by Microsoft in 1996 to make a standard pack of fonts for the Internet.
  • The project was terminated in August 2002,
  • The project was terminated in August 2002, 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.
  • 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.


  • Segoe UI, replaces Tahoma for help text.

    Similar to Frutigar
  • Segoe UI, replaces Tahoma for help text.

    Similar to Frutigar










  • 62 overlap
  • 62 overlap
  • 62 overlap





  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Web Typography

    1. 1. { Many Types, Many Faces} W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a Jason Cranford Teague Bright Eye Media jason_speaking Voices That Matter | 29 April 2009 San Francisco, California
    2. 2. { Many Types, Many Faces} W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a Jason Cranford Teague Bright Eye Media jason_speaking Voices That Matter | 29 April 2009 San Francisco, California
    3. 3. { Many Types, Many Faces} W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a Jason Cranford Teague Bright Eye Media jason_speaking Voices That Matter | 29 April 2009 San Francisco, California
    4. 4. 3 Options
    5. 5. CSS Typography =
    6. 6. CSS Typography = Limited Font Choices
    7. 7. limits
    8. 8. design is about limits
    9. 9. design is about overcoming limits
    10. 10. “Type Design is an act of plagiarism in itself—you basically recreate the flesh of the same skeleton.” Alejandro Lo Celso Saravia
    11. 11. How many fonts are there?
    12. 12. How many fonts are there? >100K Fonts
    13. 13. How many fonts are there on the Web?
    14. 14. How many fonts are there on the Web? 3 Fonts Arial Times Georgia
    15. 15. Arial Helvetica
    16. 16. Arial Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
    17. 17. Times Times New Roman
    18. 18. Times Times New Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
    19. 19. Georgia
    20. 20. Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
    21. 21. Verdana Trebuchet MS
    22. 22. Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Trebuchet MS ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
    23. 23. Andale Mono Arial Black Courier New Comic Sans MS Impact 
    24. 24. Core Web Fonts
    25. 25. Core Web Fonts
    26. 26. Core Web Fonts 11 Fonts
    27. 27. EULA
    28. 28. EULA End-User License Agreement
    29. 29. Installed Fonts
    30. 30. Windows XP
    31. 31. Windows XP +9 Fonts Franklin Gothic Medium Lucid Console Lucida Sans Unicode Marlett Microsoft Sans Serif Palatino Linotype Symbol Tahoma Wingdings
    32. 32. Windows Vista
    33. 33. Windows Vista +7 Fonts Calibri Cambria Candara Consolas Constantia Corbel Segoe UI
    34. 34. Mac OS X
    35. 35. Mac OS X +31 Fonts American Courier Monaco Typewriter Didot Optima Apple Chancery Futura Papyrus Apple Symbols Geneva Tahoma Baskerville Gill Sans Taipei Big Caslon Helvetica Times Brush Script Helvetica Neue Zapf Dingbats Chalkboard Herculanum Zapfino Charcoal CY Hoefler Text Cochin Lucida Grande Cooper Marker Felt Copperplate
    36. 36. Apple iLife
    37. 37. Apple iLife +13 Fonts Academy Engraved Palatino Bank Gothic Portago BlairMDITC TT Santa Fe Bodoni SvtyTwo ITC TT Savoye Bradley Hand ITC TT Snell Roundhand Cracked Stone Sans Handwriting – Dakota
    38. 38. Microso Office 2007
    39. 39. Microso Office 2007 +121 Fonts
    40. 40. Microso Office: Mac 2008
    41. 41. Microso Office: Mac 2008 +72 Fonts
    42. 42. MS Office: Mac & Windows
    43. 43. MS Office: Mac & Windows 62 Fonts
    44. 44. Web Safe Fonts
    45. 45. Windows
    46. 46. Windows 148 Fonts
    47. 47. Mac
    48. 48. Mac 134 Fonts
    49. 49. Mac & Windows
    50. 50. Mac & Windows 73 Fonts
    51. 51. Mac & Windows
    52. 52. Mac & Windows Wide Latin
    53. 53. Web Safe Fonts
    54. 54. Web Safe Fonts ~180 Fonts
    55. 55. 100,000 - 180 =
    56. 56. 100,000 - 180 Still Not a Lot =
    57. 57. Diavlo www.josbuivenga.demon.nl
    58. 58. ...} @font-face {
    59. 59. font-family: Diavlo; @font-face { src: url(’Diavlo_BOOK_II_37.otf’); }
    60. 60. Name you give it. font-family: Diavlo; @font-face { src: url(’Diavlo_BOOK_II_37.otf’); }
    61. 61. Name you give it. font-family: Diavlo; @font-face { src: url(’Diavlo_BOOK_II_37.otf’); } Path to font file.
    62. 62. font- georgia, times, “times new roman”, serif; family :
    63. 63. Font-family name you give it. font- diavlo, georgia, times, “times new roman”, serif; family :
    64. 64. Download
    65. 65. Download Fonts
    66. 66. Download Fonts Unlimited Fonts
    67. 67. File Format
    68. 68. File Formats
    69. 69. File Formats True Type Open Type
    70. 70. IP
    71. 71. IP Intellectual Property
    72. 72. EULA
    73. 73. EULA End-User License Agreement
    74. 74. File Formats
    75. 75. File Formats Embedded Open Type (.eot)
    76. 76. .ttf
    77. 77. .ttf v3.1
    78. 78. .ttf
    79. 79. .ttf Coming Soon
    80. 80. .ttf
    81. 81. .ttf ??????????
    82. 82. So...
    83. 83. Download Fonts Web Safe Fonts Core Web Fonts Generic Font-families
    84. 84. h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    85. 85. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    86. 86. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, Web Safe Fonts p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    87. 87. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, Web Safe Fonts Core Web Fonts p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    88. 88. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, Web Safe Fonts Core Web Fonts Generic Font-families p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    89. 89. h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography 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.
    90. 90. h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography 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.
    91. 91. h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography 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.
    92. 92. h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography 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.
    93. 93. h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography 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.
    94. 94. h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography 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
    95. 95. h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography 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.
    96. 96. design is about overcoming limits
    97. 97. Fluid Typography
    98. 98. Choosing Your Fonts
    99. 99. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    100. 100. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    101. 101. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, Web Safe Fonts p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    102. 102. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, Web Safe Fonts Core Web Fonts p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    103. 103. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, Web Safe Fonts Core Web Fonts Generic Font-families p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    104. 104. For headline copy use fonts with similar widths and kerning. Web Typography
    105. 105. For headline copy use fonts with similar widths and kerning. Web Typography
    106. 106. For body copy select fonts with bold, italic, and bold/italic versions.
    107. 107. For body copy select fonts with bold, italic, and bold/italic versions. 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. Arial
    108. 108. For body copy select fonts with bold, italic, and bold/italic versions. 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. Arial
    109. 109. For body copy select fonts with bold, italic, and bold/italic versions. 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. Microsoft Sans Serif
    110. 110. Test the different fonts in different combinations. Web Typography 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.
    111. 111. Test the different fonts in different combinations. Web Typography 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.
    112. 112. { Web Beyond A r i a l and T i m e s and G e o r g i a jason cranford teague www.speaking-in-styles.com/web- typography Fluid Typography font-family : diavlo, quot;big caslonquot;, quot;bell mtquot;, georgia, serif; Download Fonts Web Safe Fonts Core Web Fonts Generic Font Families @font { List Available at: andale mono, arial serif, sans-serif, font-family: diavlo; tinyurl.com/ (helvetica), arial black, monospace, cursive, src: 5qr64g comic sans ms, courier new fantasy url(’Diavlo.otf’); } georgia, impact, times new roman (times), trebuchet ms, verdana, web dings Referenced Web Pages Choosing Your fonts More Information lescure.com Web Typography: Tell Me What You Test the different fonts in different combinations. sci-fi.om Want For headline copy, use fonts with similar widths and tinyurl.com/4rtccs aol.com kerning. Download Fonts Tutorial yahoo.com tinyurl.com/5rfhsk msn.com For body copy, select fonts with bold, italic, and bold/ italic versions. Web Safe Fonts Tutorial de-facto.com tinyurl.com/4ud39p cameronmoll.com If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as boutique-dammann.com back-ups. ilovetypography.com speaking-in- thefwa.com styles.com emigre.com chank.com josbuivenga.demon.nl www.princexml.com/howcome/2008/ webfonts/
    113. 113. www.speaking-in-styles.com/web-typography
    114. 114. { Many Types, Many Faces} W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a Questions www.speaking-in-styles.com/web-typography jason_speaking www.brighteyemedia.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×