Your SlideShare is downloading. ×
Font Swoon - Advanced Web Typography
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Font Swoon - Advanced Web Typography

5,672
views

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

Published in: Technology, Design

1 Comment
18 Likes
Statistics
Notes
  • 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?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,672
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
85
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

×