Your SlideShare is downloading. ×
0
WEBFONTS1
AGENDA    1. Who cares?    2. Where do fonts come from?    3. Why do we have to pay for fonts?    4. Webfonts : Embedding ...
1)   WHO CARES?3
You have 6 SECONDS to make a good impression.                           Be professional.                           Shine y...
Font is like an individual song    Typeface is like a CD, a collection of songs                   EXAMPLE:          Helvet...
2)   WHERE DO FONTS          COME FROM?6
A BRIEF HISTORY                 Moveable     type was born during the Renaissance                 Printers   hired Pun...
A BRIEF HISTORYMetal    type was    distributed in boxes    with compartmentsBoxes     were called    casesUpper   C...
A BRIEF HISTORY1884   Ottmar Mergenthaler    inventing a typesetting    machine called the    Linotype.The   machine h...
A BRIEF HISTORY1950—1980 Phototype setting: Strobe light through spinning disk which had a film negative.10
3)   WHY DO I HAVE     TO PAY FOR FONTS?11
TYPE DESIGN IS AN ART Skilled artisans design Typefaces Type foundries pay Type Designers to turn metal type designs i...
1976 COPYRIGHT LAW     From Wikipedia:     The Copyright Law of the United States encourages the     creation of art and c...
4)   WEBFONTS : EMBEDDING14
WHERE DO YOU FIND WEBFONTS?15
FREE : YOUR COMPUTER [WEB-SAFE]       Windows fonts / Mac Fonts / Font family16
FREE : YOUR COMPUTER [WEB-SAFE]       Windows fonts / Mac Fonts / Font family17
COMPUTER FONTS : HOW TO USE     p   { font-family: Verdana, Geneva, sans-serif ; }     p   { font-family: ‘Lucida Console’...
FREE : FONT SQUIRRELfontsquirrel.comGood   Font resourceOnce  you locate a font, you have to upload them to your web s...
FREE : FONT SQUIRREL20
FREE : FONT SQUIRRELDownload Folder: OTF files21
WHERE TO   PURCHASE   FONTS22
PURCHASE : TYPE FOUNDRIES AND DESIGNERS                   Adobe.com                    Monotype                   MyFonts....
PURCHASE : TYPE FOUNDRIES AND DESIGNERSMyFonts.comReseller         of most all foundriesReseller         of small font...
THE TROUBLE WITH   BROWSERS25
You’ll need   font files for cross-browser support.26
FONTS & BROWSER SUPPORT     TTF   True Type   EOT          SVG                       Embedded     Scaleable     OTF Open T...
FONTS & BROWSER SUPPORT     WOFF (Web Open Font Format)      Developed in 2009           Supported by the W3C, aims to m...
FONTS & BROWSER SUPPORT           http://caniuse.com/ttf29
{ Remember these? OTF files acquired from Font Squirrel }                                              +3   font files*   ...
NOW   WHAT31
FONT SQUIRREL TO THE RESCUE32
@FONT-FACE GENERATOR     @font-face Generator creates all 4 font formats for browser compatibility.33
@FONT-FACE KIT GENERATORCowboy Western.otf purchased from MyFonts Check OPTIMAL and click DOWNLOAD34
@FONT-FACE KIT GENERATOR35
@FONT-FACE KIT GENERATOR A folder with all of your      converted font files,       plus a demo page     will be downloade...
@FONT-FACE KIT GENERATOR37
@FONT-FACE KIT GENERATOR : DEMO.HTMLSpecimen Tab38
@FONT-FACE GENERATOR : DEMO.HTML     Sample Layout39
@FONT-FACE GENERATOR : DEMO.HTMLGlyphs & LanguagesCurly Quote EntityCode: "40
@FONT-FACE GENERATOR : DEMO.HTMLInstalling Webfonts@font-face code41
@FONT-FACE : STYLESHEET@font-face {      font-family: CowboyWestern;      src: url(cowboy_western-webfont.eot);      src: ...
ICON   FONTS43
FREE FONT : FONT-AWESOME / ICON FONT                  One font, 249 icons             Pictographs of web-related actions. ...
FREE FONT : FONT-AWESOME / ICON FONT Where to download: http://fortawesome.     github.com/   Font-Awesome/       --------...
6)   WEBFONTS : HOSTING46
FREE FONTS : GOOGLE FONTSgoogle.com/webfonts   Hosted solution   You don’t have to     install fonts47
USING : GOOGLE FONTS48
USING : GOOGLE FONTS49
USING : GOOGLE FONTS50
USING : GOOGLE FONTS51
USING : GOOGLE FONTS52
USING : GOOGLE FONTSPaste into Header of your HTML     <link href=http://fonts.googleapis.com/css?family=Raleway:400,500,7...
WEBFONTS : HOSTING FONTS          Fontdeck.com           Typekit.com           Webtype.com            Fonts.com54
WEBFONTS : HOSTING FONTS     http://sprungmarker.de/wp‐content/uploads/webfont‐services/ 55
WEBFONTS : HOSTING FONTS56
HOSTING FONTS : FONTDECK         (VARIOUS SMALL FOUNDRIES)57
HOSTING FONTS : FONTDECK / PRICING     THEIR PLAN:     $7.5 per font       per year.      Unlimited      fonts and      we...
HOSTING FONTS : TYPEKIT              (ADOBE)59
HOSTING FONTS : TYPEKIT / PRICING60
HOSTING FONTS : FONTS.COM         (MONOTYPE, LINOTYPE, ITC)61
HOSTING FONTS : FONTS.COM / PRICING                                       MY PLAN:                                     $10...
FONTS.COM : USING63
FONTS.COM : USING64
FONTS.COM : USING Add & Edit Fonts                      Click Publish Options Add & Edit Domains65
FONTS.COM : USING HTML header code:     Link to javascript        Fonts.com         CSS code66
FONTS.COM : USING HTML header code: Links to stylesheet at      Fonts.com67
FONTS.COM : USINGUpgrade plan to buyfonts and self-host68
6)   HOW   TO USE TYPE LIKE A PRO69
TYPE LIKE A PRO: USE NICE TYPE     “Hardly anyone can discern good     typography from bad typography,     but everyone ca...
USING TYPE LIKE A PRO     1. Use curly quotes     2. Use ample leading (line-height)     3. Never, never, never justify ty...
TYPE LIKE A PRO : CHARACTER ENTITIES     Not so Good                   Good                            Left Quote : “     ...
TYPE LIKE A PRO: LINE-HEIGHT / BREATHE      OK                       Better73
TYPE LIKE A PRO: DONT JUSTIFY     Blah                       Better74
TYPE LIKE A PRO: USE NICE TYPE              Nice Typefaces               Amateurish and overusedALRIGHT SANS MEDIUMPLUTO H...
RESOURCES : TWITTER76
FONT VS   TYPEFACE77
THANK YOU FOR LISTENING              :)78
Upcoming SlideShare
Loading in...5
×

Webfonts and Web Typography

538

Published on

How to find webfonts and use them on your website.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
538
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Webfonts and Web Typography"

  1. 1. WEBFONTS1
  2. 2. AGENDA 1. Who cares? 2. Where do fonts come from? 3. Why do we have to pay for fonts? 4. Webfonts : Embedding 5. Webfonts : Hosting 6. How to use Type like a Pro2
  3. 3. 1) WHO CARES?3
  4. 4. You have 6 SECONDS to make a good impression. Be professional. Shine your shoes. Press your pants. Use nice type.4
  5. 5. Font is like an individual song Typeface is like a CD, a collection of songs EXAMPLE: Helvetica Nueu Thin is a font Helvetica Nueu is a typeface5
  6. 6. 2) WHERE DO FONTS COME FROM?6
  7. 7. A BRIEF HISTORY Moveable type was born during the Renaissance Printers hired Punchcutters to craft metal type Punchcutters would turned hand-written alphabets into metal type. Outline of a letter is transferred to one end of a steel bar. The negative space is cut away and a Punch is createdPunch & Matrix A Matrix is created by imprinting the Punch on a soft metal Lead is poured into the matrix to produce a single piece of type The typeface, Garamond, is named after the Punchcutter Claude Garamond (c. 1480–1561).7
  8. 8. A BRIEF HISTORYMetal type was distributed in boxes with compartmentsBoxes were called casesUpper Case and Lower case lettersType was set by hand8
  9. 9. A BRIEF HISTORY1884 Ottmar Mergenthaler inventing a typesetting machine called the Linotype.The machine had a keyboard that the typesetter used to set lines of type.9
  10. 10. A BRIEF HISTORY1950—1980 Phototype setting: Strobe light through spinning disk which had a film negative.10
  11. 11. 3) WHY DO I HAVE TO PAY FOR FONTS?11
  12. 12. TYPE DESIGN IS AN ART Skilled artisans design Typefaces Type foundries pay Type Designers to turn metal type designs into Digital versions. Examples of digital versions of Garamond12
  13. 13. 1976 COPYRIGHT LAW From Wikipedia: The Copyright Law of the United States encourages the creation of art and culture by rewarding authors and artists with a set of exclusive rights. Federal Copyright law grants authors and artists: The exclusive right to make and sell copies of their works  The right to create derivative works  The right to perform or display their works publicly.  These exclusive rights are subject to a time limit, and generally  expire 70 years after the authors death.13
  14. 14. 4) WEBFONTS : EMBEDDING14
  15. 15. WHERE DO YOU FIND WEBFONTS?15
  16. 16. FREE : YOUR COMPUTER [WEB-SAFE] Windows fonts / Mac Fonts / Font family16
  17. 17. FREE : YOUR COMPUTER [WEB-SAFE] Windows fonts / Mac Fonts / Font family17
  18. 18. COMPUTER FONTS : HOW TO USE p { font-family: Verdana, Geneva, sans-serif ; } p { font-family: ‘Lucida Console’, Monaco, monospace ; } Mac snob p { font-family: ‘Hel Neue, Helvetica, sans-serif ; }18
  19. 19. FREE : FONT SQUIRRELfontsquirrel.comGood Font resourceOnce you locate a font, you have to upload them to your web serverUse CSS to declare19
  20. 20. FREE : FONT SQUIRREL20
  21. 21. FREE : FONT SQUIRRELDownload Folder: OTF files21
  22. 22. WHERE TO PURCHASE FONTS22
  23. 23. PURCHASE : TYPE FOUNDRIES AND DESIGNERS Adobe.com Monotype MyFonts.com Typography.com* OkayType*23
  24. 24. PURCHASE : TYPE FOUNDRIES AND DESIGNERSMyFonts.comReseller of most all foundriesReseller of small font design firms All kinds of way to searchWhat the FontKeep a library of your favorite fontsRemembers every font you bought24
  25. 25. THE TROUBLE WITH BROWSERS25
  26. 26. You’ll need font files for cross-browser support.26
  27. 27. FONTS & BROWSER SUPPORT TTF True Type EOT SVG Embedded Scaleable OTF Open Type Open Type Vector Graphics Safari, Internet Others Firefox Explorer Chrome27
  28. 28. FONTS & BROWSER SUPPORT WOFF (Web Open Font Format) Developed in 2009  Supported by the W3C, aims to make it the standard  Essentially Open Type or True Type with compression  and additional meta information All browsers will support this in the future 28
  29. 29. FONTS & BROWSER SUPPORT http://caniuse.com/ttf29
  30. 30. { Remember these? OTF files acquired from Font Squirrel } +3 font files* +3 font files +3 font files +3 font files +3 font files +3 font files +3 font files 21 font files + 7 font files *EOT + SVG + WOFF 28 font files to upload30
  31. 31. NOW WHAT31
  32. 32. FONT SQUIRREL TO THE RESCUE32
  33. 33. @FONT-FACE GENERATOR @font-face Generator creates all 4 font formats for browser compatibility.33
  34. 34. @FONT-FACE KIT GENERATORCowboy Western.otf purchased from MyFonts Check OPTIMAL and click DOWNLOAD34
  35. 35. @FONT-FACE KIT GENERATOR35
  36. 36. @FONT-FACE KIT GENERATOR A folder with all of your converted font files, plus a demo page will be downloaded to your computer once Font Squirrel is done generating your fonts.36
  37. 37. @FONT-FACE KIT GENERATOR37
  38. 38. @FONT-FACE KIT GENERATOR : DEMO.HTMLSpecimen Tab38
  39. 39. @FONT-FACE GENERATOR : DEMO.HTML Sample Layout39
  40. 40. @FONT-FACE GENERATOR : DEMO.HTMLGlyphs & LanguagesCurly Quote EntityCode: "40
  41. 41. @FONT-FACE GENERATOR : DEMO.HTMLInstalling Webfonts@font-face code41
  42. 42. @FONT-FACE : STYLESHEET@font-face { font-family: CowboyWestern; src: url(cowboy_western-webfont.eot); src: url(cowboy_western-webfont.eot?#iefix) format(embedded-opentype), url(cowboy_western-webfont.woff) format(woff), url(cowboy_western-webfont.ttf) format(truetype), url(cowboy_western-webfont.svg#CowboyWestern) format(svg); font-weight: normal; font-style: normal;} p { font-family: CowboyWestern; }42
  43. 43. ICON FONTS43
  44. 44. FREE FONT : FONT-AWESOME / ICON FONT One font, 249 icons Pictographs of web-related actions. CSS control Easy to style icon color, size, shadow. Anything thats possible with CSS. Perfect on Retina Displays Icons are vectors, which mean theyre gorgeous on high-resolution displays. Infinite scalability Scalable vector graphics means every icon looks awesome at any size.44
  45. 45. FREE FONT : FONT-AWESOME / ICON FONT Where to download: http://fortawesome. github.com/ Font-Awesome/ --------------- bigwdesign.com/ webfonts/font- awesome/github/ docs/test.html45
  46. 46. 6) WEBFONTS : HOSTING46
  47. 47. FREE FONTS : GOOGLE FONTSgoogle.com/webfonts Hosted solution You don’t have to install fonts47
  48. 48. USING : GOOGLE FONTS48
  49. 49. USING : GOOGLE FONTS49
  50. 50. USING : GOOGLE FONTS50
  51. 51. USING : GOOGLE FONTS51
  52. 52. USING : GOOGLE FONTS52
  53. 53. USING : GOOGLE FONTSPaste into Header of your HTML <link href=http://fonts.googleapis.com/css?family=Raleway:400,500,700,800 rel=stylesheet type=text/css>How to use the font in your CSS h1 { font-family: ‘Raleway,’ sans-serif; font-weight: 400; }53
  54. 54. WEBFONTS : HOSTING FONTS Fontdeck.com Typekit.com Webtype.com Fonts.com54
  55. 55. WEBFONTS : HOSTING FONTS http://sprungmarker.de/wp‐content/uploads/webfont‐services/ 55
  56. 56. WEBFONTS : HOSTING FONTS56
  57. 57. HOSTING FONTS : FONTDECK (VARIOUS SMALL FOUNDRIES)57
  58. 58. HOSTING FONTS : FONTDECK / PRICING THEIR PLAN: $7.5 per font per year. Unlimited fonts and websites.58
  59. 59. HOSTING FONTS : TYPEKIT (ADOBE)59
  60. 60. HOSTING FONTS : TYPEKIT / PRICING60
  61. 61. HOSTING FONTS : FONTS.COM (MONOTYPE, LINOTYPE, ITC)61
  62. 62. HOSTING FONTS : FONTS.COM / PRICING MY PLAN: $10 per month. Unlimited fonts and websites.62
  63. 63. FONTS.COM : USING63
  64. 64. FONTS.COM : USING64
  65. 65. FONTS.COM : USING Add & Edit Fonts Click Publish Options Add & Edit Domains65
  66. 66. FONTS.COM : USING HTML header code: Link to javascript Fonts.com CSS code66
  67. 67. FONTS.COM : USING HTML header code: Links to stylesheet at Fonts.com67
  68. 68. FONTS.COM : USINGUpgrade plan to buyfonts and self-host68
  69. 69. 6) HOW TO USE TYPE LIKE A PRO69
  70. 70. TYPE LIKE A PRO: USE NICE TYPE “Hardly anyone can discern good typography from bad typography, but everyone can feel it.” —Oliver Richtenstien ia.com70
  71. 71. USING TYPE LIKE A PRO 1. Use curly quotes 2. Use ample leading (line-height) 3. Never, never, never justify type 4. Don’t make your columns too skinny or too wide 5. Don’t use more than 3 typefaces per page 6. Choose an appropriate typeface 7. Avoid Comic Sans 8. Don’t use EM or BOLD, use fonts that are cut Italic or Bold71
  72. 72. TYPE LIKE A PRO : CHARACTER ENTITIES Not so Good Good Left Quote : “ Right Quote : ” Apostrophe : ’72
  73. 73. TYPE LIKE A PRO: LINE-HEIGHT / BREATHE OK Better73
  74. 74. TYPE LIKE A PRO: DONT JUSTIFY Blah Better74
  75. 75. TYPE LIKE A PRO: USE NICE TYPE Nice Typefaces Amateurish and overusedALRIGHT SANS MEDIUMPLUTO HEAVYCLARENDON75
  76. 76. RESOURCES : TWITTER76
  77. 77. FONT VS TYPEFACE77
  78. 78. THANK YOU FOR LISTENING :)78
  1. A particular slide catching your eye?

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

×