Webfonts and Web Typography

  • 430 views
Uploaded on

How to find webfonts and use them on your website.

How to find webfonts and use them on your website.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
430
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WEBFONTS1
  • 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. 1) WHO CARES?3
  • 4. You have 6 SECONDS to make a good impression. Be professional. Shine your shoes. Press your pants. Use nice type.4
  • 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. 2) WHERE DO FONTS COME FROM?6
  • 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. 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. 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. A BRIEF HISTORY1950—1980 Phototype setting: Strobe light through spinning disk which had a film negative.10
  • 11. 3) WHY DO I HAVE TO PAY FOR FONTS?11
  • 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. 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. 4) WEBFONTS : EMBEDDING14
  • 15. WHERE DO YOU FIND WEBFONTS?15
  • 16. FREE : YOUR COMPUTER [WEB-SAFE] Windows fonts / Mac Fonts / Font family16
  • 17. FREE : YOUR COMPUTER [WEB-SAFE] Windows fonts / Mac Fonts / Font family17
  • 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. 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. FREE : FONT SQUIRREL20
  • 21. FREE : FONT SQUIRRELDownload Folder: OTF files21
  • 22. WHERE TO PURCHASE FONTS22
  • 23. PURCHASE : TYPE FOUNDRIES AND DESIGNERS Adobe.com Monotype MyFonts.com Typography.com* OkayType*23
  • 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. THE TROUBLE WITH BROWSERS25
  • 26. You’ll need font files for cross-browser support.26
  • 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. 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. FONTS & BROWSER SUPPORT http://caniuse.com/ttf29
  • 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. NOW WHAT31
  • 32. FONT SQUIRREL TO THE RESCUE32
  • 33. @FONT-FACE GENERATOR @font-face Generator creates all 4 font formats for browser compatibility.33
  • 34. @FONT-FACE KIT GENERATORCowboy Western.otf purchased from MyFonts Check OPTIMAL and click DOWNLOAD34
  • 35. @FONT-FACE KIT GENERATOR35
  • 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. @FONT-FACE KIT GENERATOR37
  • 38. @FONT-FACE KIT GENERATOR : DEMO.HTMLSpecimen Tab38
  • 39. @FONT-FACE GENERATOR : DEMO.HTML Sample Layout39
  • 40. @FONT-FACE GENERATOR : DEMO.HTMLGlyphs & LanguagesCurly Quote EntityCode: "40
  • 41. @FONT-FACE GENERATOR : DEMO.HTMLInstalling Webfonts@font-face code41
  • 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. ICON FONTS43
  • 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. 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. 6) WEBFONTS : HOSTING46
  • 47. FREE FONTS : GOOGLE FONTSgoogle.com/webfonts Hosted solution You don’t have to install fonts47
  • 48. USING : GOOGLE FONTS48
  • 49. USING : GOOGLE FONTS49
  • 50. USING : GOOGLE FONTS50
  • 51. USING : GOOGLE FONTS51
  • 52. USING : GOOGLE FONTS52
  • 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. WEBFONTS : HOSTING FONTS Fontdeck.com Typekit.com Webtype.com Fonts.com54
  • 55. WEBFONTS : HOSTING FONTS http://sprungmarker.de/wp‐content/uploads/webfont‐services/ 55
  • 56. WEBFONTS : HOSTING FONTS56
  • 57. HOSTING FONTS : FONTDECK (VARIOUS SMALL FOUNDRIES)57
  • 58. HOSTING FONTS : FONTDECK / PRICING THEIR PLAN: $7.5 per font per year. Unlimited fonts and websites.58
  • 59. HOSTING FONTS : TYPEKIT (ADOBE)59
  • 60. HOSTING FONTS : TYPEKIT / PRICING60
  • 61. HOSTING FONTS : FONTS.COM (MONOTYPE, LINOTYPE, ITC)61
  • 62. HOSTING FONTS : FONTS.COM / PRICING MY PLAN: $10 per month. Unlimited fonts and websites.62
  • 63. FONTS.COM : USING63
  • 64. FONTS.COM : USING64
  • 65. FONTS.COM : USING Add & Edit Fonts Click Publish Options Add & Edit Domains65
  • 66. FONTS.COM : USING HTML header code: Link to javascript Fonts.com CSS code66
  • 67. FONTS.COM : USING HTML header code: Links to stylesheet at Fonts.com67
  • 68. FONTS.COM : USINGUpgrade plan to buyfonts and self-host68
  • 69. 6) HOW TO USE TYPE LIKE A PRO69
  • 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. 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. TYPE LIKE A PRO : CHARACTER ENTITIES Not so Good Good Left Quote : &#8220; Right Quote : &#8221; Apostrophe : &#8217;72
  • 73. TYPE LIKE A PRO: LINE-HEIGHT / BREATHE OK Better73
  • 74. TYPE LIKE A PRO: DONT JUSTIFY Blah Better74
  • 75. TYPE LIKE A PRO: USE NICE TYPE Nice Typefaces Amateurish and overusedALRIGHT SANS MEDIUMPLUTO HEAVYCLARENDON75
  • 76. RESOURCES : TWITTER76
  • 77. FONT VS TYPEFACE77
  • 78. THANK YOU FOR LISTENING :)78