Font Swoon - Advanced Web Typography

  • 5,168 views
Uploaded on

In Font Swoon we will not only take a great look at some cool and inspiring fonts and implementations, but an in-depth look at advanced type techniques using CSS3 as well as basic implementation. A …

In Font Swoon we will not only take a great look at some cool and inspiring fonts and implementations, but an in-depth look at advanced type techniques using CSS3 as well as basic implementation. A type nerd must see.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • This is a very good overview over the fonts and her providers.
    But which font will be useful to a open source programmer or an free author?
    He must be write articles and he can only use free resources. Which free fonts are supported by google docs and by slideshare? Which fonts works good with this portals? Which fonts could he use without to break the copyright low?
    Is Arial created by google docs ok or must be used Apparatus from sil.org?
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,168
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
83
Comments
1
Likes
18

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. Font Swoon ...@saracannon sara-cannon.com
  • 2. Sara Cannon Freelance Artist, Designer, & WordPress Developer living in Birmingham, AL @saracannonslideshare.net/saracannon
  • 3. #fontswoon
  • 4. Web Design is 95% Typographyinformationarchitects.jp/en/the-web-is-all-about-typography-period
  • 5. Web Examples
  • 6. trentwalton.com/2011/05/10/fit-to-scale
  • 7. Liquor Store FF Meta Serif
  • 8. jaxvineyards.com
  • 9. FF DinFF Tisa
  • 10. browsehappy.com
  • 11. League Gothic Le Monde Courrier
  • 12. designmadeingermany.de/magazin/5
  • 13. FF Din
  • 14. Fonts! Fonts! Fonts!
  • 15. Slab-Serif
  • 16. @ fo nt-f ac e ArvoMade By: Anton Kovit files.korkork.com
  • 17. ArcherMade By: H&FJ typography.com
  • 18. @ fo nt-f ac e AdelleMade By: Type Together type-together.com
  • 19. @ fo nt-f ac e CambriaMade By: Ascender Fonts ascenderfonts.com
  • 20. @ fo nt-f ac e ClarendonMade By: Bitstream bitstream.com
  • 21. @ fo nt-f ac e Chaparral ProMade By: Adobe adobe.com
  • 22. @ fo nt-f ac e Droid SerifMade By: Google code.google.com/android
  • 23. @ fo nt-f ac e Museo SlabMade By: exljbris exljbris.com
  • 24. VitesseMade By: H&FJ typography.com
  • 25. Sans-Serif
  • 26. AvenirMade By: Adrian Frutiger Linotype.com
  • 27. @ fo nt-f ac e Droid SansMade By: Google code.google.com/android
  • 28. @ fo nt-f ac e Brandon GrotesqueMade By: HVD hvdfonts.com
  • 29. @ fo nt-f ac e DINMade By: Linotype linotype.com
  • 30. @ fo nt-f ac e FuturaMade By: BitStream Adobe.com
  • 31. GothamMade By: H&FJ typography.com
  • 32. @ fo nt-f ac e Proxima NovaMade By: Mark Simonson ms-studio.com
  • 33. @ fo nt-f ac e OmnesMade By: Joshua Darden dardenstudio.com
  • 34. Display Type
  • 35. @ fo nt-f ac e MenschMade By: Morgan Kuntson los ype.com
  • 36. @ fo nt-f ac e LEAGUE GOTHICMade By: The League of Moveable Type theleagueofmoveabletype.com
  • 37. @ fo nt-f ac e Bello ScriptMade By: Underware underware.nl
  • 38. FranchiseMade By: Derek Weathersbee los ype.com
  • 39. @ fo nt-f ac e HomesteadMade By: Luke Lisi los ype.com
  • 40. RangerMade By: Evan Huwa los ype.com
  • 41. Type Foundries
  • 42. Lost Type los ype.com
  • 43. exljbris exljbris.com
  • 44. font font font-font.com
  • 45. H&FJ typography.com
  • 46. League ofMoveable Type theleagueofmoveabletype.com
  • 47. Open Source! Ofl (open Font License)theleagueofmoveabletype.com/manifesto
  • 48. House Industries houseind.com
  • 49. ARS Type arstype.angusrshamal.com
  • 50. Craft You CSS
  • 51. Beyond theSystem Font!
  • 52. @font-face
  • 53. Hand CodeTypekit Or Other Paid Hosts Google Api
  • 54. Paulirish.com/2009/ bulletproof-font-face-implementation-syntax/
  • 55. Fontsquirrel.com
  • 56. sprungmarker.de/wp-content/uploads/webfont-services
  • 57. typekit.com
  • 58. Test & Tweak
  • 59. check all browsers
  • 60. TYPE CRUNCH!!!
  • 61. Disable for IE
  • 62. Disable for Windows
  • 63. Disable for Firefox
  • 64. Firefox on all of Windows
  • 65. Chrome on Windows XP getting around cachecustom.jsstyle.css
  • 66. Neat Type Scripts
  • 67. Lettering.js le eringjs.com
  • 68. kern.js kernjs.com
  • 69. FitText fi extjs.com
  • 70. Neat Type Scripts
  • 71. WP Typographywordpress.org/extend/plugins/wp-typography
  • 72. Drop Capswordpress.org/extend/plugins/drop-caps/
  • 73. Other Must Havesies
  • 74. What Font chengyinliu.com/whatfont.html
  • 75. live example: valiocon.com
  • 76. Google Font Previewergithub.com/pamelafox/font-previewer-extension
  • 77. MIN min.artequalswork.com
  • 78. Follow theIndustry
  • 79. Follow The Industry@JasonSantaMaria @fontsquirrel@veen @typekit@brucel @h_@ilovetypography @clagnut@jessicahische @fchimero
  • 80. blog.typekit.com
  • 81. Find Inspiration
  • 82. ilovetypography.com
  • 83. webtypography.net
  • 84. typographica.org
  • 85. fontsinuse.com
  • 86. friendsoftype.com
  • 87. typography-daily.com
  • 88. siteinspire.net
  • 89. typographyserved.com
  • 90. ministryoftype.co.uk
  • 91. dribbble.com
  • 92. wordpress.org/showcase
  • 93. life is short, art is longTypography is Everything. code is poetry.
  • 94. #fontswoon@saracannon sara-cannon.com