Wide Open Faces


Published on

Choosing Fonts for Your Website, eBook, Mobile App. Presented at the 2010 MIMA Summit in Minneapolis, MN

Published in: Design
1 Comment
  • Nice slides but how can i works correct with open fonts and slideshare?
    I am use cousine (OFL) and LibreOffice to upload at slideshare. But my slides at slideshare does have another look as the same at my PC.
    Do you have hints for this?
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Wide Open Faces

  1. 1. wide open faces
  2. 2. Choosing Fonts & for Your Website, eBook, Mobile App
  3. 3. “Garrick’s not a typographer, nor a font salesman. He’s a facilitator, a proponent of an open web” - Tom Michlig
  4. 4. a piano with only five keys
  5. 5. sIFR(etc - Flash) Cufon(etc - Javascript) Text-as-Image
  6. 6. O R sIFR T F O D N O Y Cufon PY B C O Text-as-Image
  7. 7. @font- face {}
  8. 8. brand-consistent, maintainable, future-proof, SEO-able, compatible.
  9. 9. whoisrossbrown.com - Paul Lloyd’s Hominis & John Stracke’s Essays
  10. 10. fontconf.com - Titillium, League Gothic, Acknowledgement
  11. 11. minnpost.com Sertig
  12. 12. garrickvanburen.com - Steinem, Ikarius, Paneuropa
  13. 13. shortformblog.com - Chunk
  14. 14. @font-face {   font-family:‘League Gothic’;   src: url(‘http://kernest.com/embed/league-gothic.otf’); } p {   font-family:‘League Gothic’; }
  15. 15. Font Formats
  16. 16. .OTF / .TTF opentype / truetype
  17. 17. .SVG scalable vector graphics
  18. 18. .EOT embedded open-type
  19. 19. .WOFF web open font format
  20. 20. @font-face { font-family: 'League Gothic'; src: url('http://kernest.com/embed/league- gothic.eot'); src: local('://'), url('http://kernest.com/embed/ league-gothic.svg#league_gothic') format('svg'), url ('http://kernest.com/embed/league-gothic.woff') format ('woff'), url('http://kernest.com/embed/league- gothic.otf') format('opentype'); } p {   font-family:‘League Gothic’; }
  21. 21. @font-face { font-family: 'League Gothic'; src: url('http://kernest.com/embed/league-gothic'), url('http://kernest.com/embed/league- gothic.svg#league_gothic') format('svg') ; } p {   font-family:‘League Gothic’; }
  22. 22. Do You Have a License?
  23. 23. Do You O Have a. N License
  24. 24. Web- Friendly Font Licenses.
  25. 25. Open Font License sil.org kernest.com/ofl - commercial use - redistribution - derivative works
  26. 26. Acknowledgement A was a quick f project, whi wanted to complete in t r to give a cop the result to friend to commemorat
  27. 27. League Gothic / League Ghotic Extended g League Gothic is a revival of an old and one of our favorite typefaces, A Gothic No.1. It was originally design 0 Morris Fuller Benton for the Americ Founders Company (ATF) in 1903. Th company went bankrupt in 1993. An the original typeface was created b
  28. 28. PT Sans K PT Sans family was developed as a the project “Public Types of R Federation”. The fonts of this projec open user license and can be l distributed. The main aim of the pr to give possibility to the peop Russia to read and write on native languages. The proj dedicated to 300-year anniversary civil type invented by Peter the G
  29. 29. Titillium g The aim of the project is the creation of a collective fonts released under OFL to be promoted and shared through a web platf Each academic year, a dozen of y students are working on the proje developing and solving problems. The type designers interest the amendment or revisio Titillium are invited to coop or develop their own varian
  30. 30. GNU General Public License gnu.org/licenses kernest.com/gpl - commercial use - redistribution - derivative works
  31. 31. Electrum E J'étais bien loin d'imaginer que la réa ce caractère prendrait autant de temp les premiers dessins mis en ligne fin a De même, j'ai profité de ce réalisation pour fixer les sc opentypes liés aux indices dérivés parfois utilisés en publication. L'objectif était
  32. 32. Mekanus K La famille de police Mekanus est née d'u de style ayant pour objet de combiner u typewriting et courbes qui rappellent l'é Durant le developpement, elle a été empat f manière à embellir le rendu initial. Avec le elle a été étendues avec de nombreuses liga servirent à écrire le script opentype, ainsi placement PUA de manière à pouvoir incorporées dans les polices postscrip
  33. 33. Ikarius ß Les polices Ikarius utilisent des hauts caractères épaißis et droits par rappo et se caractérisent également par un s pour les bas de caße. Elles sont deßin k manière à offrir un rendu visuel équili utilisables à la fois pour le texte et le t Ikarius poßède un espacement reßerré un aspect légèrement condensé. Dans version les caractères « v, y, w » ont d la partie supérieure comme les autres de la police. La barre inférieure de l'œ
  34. 34. a Cantarell “The Cantarell is a contemporary Human designed for on-screen reading; in parti web pages on an HTC Dream mobile ph device runs Google Android and therefo f browser supporting the exciting new we known as @font-face. As my very first typeface design, th has many faults, yet it achieves the improving readability on this device - David Crossland
  35. 35. X11 / MIT License en.wikipedia.org/wiki/Mit_license kernest.com/licenses/x11-license - commercial use - redistribution - derivative works
  36. 36. CMU Serif Upright Roman & Computer Modern Unicode fonts were c metafont sources using mftrace with aut backend and fontforge (former pfaedit). purpose is to create free good quality fon X applications supporting many languag k the fonts contain glyphs from Latin1 (M vnr), Cyrillic (lh) and Greek (cbgreek w code sets and IPA extensions (from tipa alphabets are also welcome. Now this se fonts. It is better to use these fonts with enabled.
  37. 37. CMU Concrete A Computer Modern Unicode fonts were co metafont sources using mftrace with auto and fontforge (former pfaedit). Their mai create free good quality fonts for us k applications supporting many languages. fonts contain glyphs from Latin1 (Metafo Cyrillic (lh) and Greek (cbgreek when av and IPA extensions (from tipa). Other alp welcome. Now this set contains 33 fonts. use these fonts with antialiasing enabled.
  38. 38. CMU Sans Serif G Computer Modern Unicode fonts were convert metafont sources using mftrace with autotrace fontforge (former pfaedit). Their main purpose free good quality fonts for use in X applicat a supporting many languages. Currently the font glyphs from Latin1 (Metafont ec, tc, vnr), Cyr Greek (cbgreek when available) code sets and (from tipa). Other alphabets are also welcome contains 33 fonts. It is better to use these fo antialiasing enabled.
  39. 39. Web Native hi low openly stroke licensed contrast large x-height open counter kernest.com/web-native
  40. 40. free as in Freedom
  41. 41. league gothic 202 glyphs
  42. 42. “We all love League Gothic font from theleagueofmoveabletype.com So I extended this famous and awesome font...” http://typethefont.com/post/798257771/league-ghotic-extended
  43. 43. league gothic league ghotic extended 202 glyphs 321 glyphs
  44. 44. Where to find open fonts
  45. 45. OpenFontLibrary.org 87 fonts all 100% open
  46. 46. FontSquirrel.com/FontFace lots of fonts ready for use - check the licenses.
  47. 47. Kernest.com 700 openly licensed fonts categorized by license & freedom.
  48. 48. Let’s Keep Talking garrick@kernest.com Brought to you with: CMU Serif Upright Italic & Providence