Webtypografie

4.995 Aufrufe

Veröffentlicht am

Veröffentlicht in: Design, Technologie
0 Kommentare
6 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.995
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
28
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Webtypografie

  1. 1. Web typografie Mehr als Arial oder Helvetica
  2. 2. web-typografie martin hahn 2010 Typografie für digitale Texte Typografie bezweckt, Texte lesbar und verständlich sowie optisch ansprechend zu präsentieren.« Wikipedia
  3. 3. Status quo
  4. 4. web-typografie martin hahn 2010
  5. 5. web-typografie martin hahn 2010
  6. 6. web-typografie martin hahn 2010 Kommt einem irgendwie bekannt vor…
  7. 7. web-typografie martin hahn 2010 Status quo Webdesign & Webtypografie Konzentration auf Farben, Bilder, Anordung Inhalte. Typografische Gestaltung Regeln werden mißachtet. BAD BAD TYPO
  8. 8. Die Folgen...
  9. 9. web-typografie martin hahn 2010 „User wollen keine Texte lesen!“
  10. 10. Also besser machen!
  11. 11. was?
  12. 12. web-typografie martin hahn 2010 Am Anfang... war die Lesbarkeit.
  13. 13. web-typografie martin hahn 2010 Readability: Texte organisieren! Texte scanbar machen! Texte lesbar machen! Auszeichnungen einsetzen
  14. 14. wie?
  15. 15. Makrotypografie Das große Ganze sehen.
  16. 16. web-typografie martin hahn 2010 Texte organisieren Content Usability Inhalt kürzen, Inhalt kürzen, Inhalt kürzen. Nutzlose Wörter weglassen. Objektive, einfache Sprache verwenden. Schlüsselwörter benutzen. Keine Rechtschreib- Grammatikfehler.
  17. 17. web-typografie martin hahn 2010
  18. 18. web-typografie martin hahn 2010 Pageflow Readability
  19. 19. web-typografie martin hahn 2010
  20. 20. web-typografie martin hahn 2010
  21. 21. web-typografie martin hahn 2010
  22. 22. web-typografie martin hahn 2010 Raster / Spalten
  23. 23. web-typografie martin hahn 2010 http://960.gs http://gridinator.com http://www.spry-soft.com/grids http://www.gridsystemgenerator.com http://www.grafikk.co.uk/gridmaker http://speckyboy.com/2009/07/15/50-useful- http://www.andrewingram.net/articles/ tools-and-generators-for-easy-css-development/ gridmaker_for_photoshop_cs4
  24. 24. web-typografie martin hahn 2010 Grundlinienraster Im Print Standard, im Web ein Fremdwort. Vertikale Ausrichtung der Inhalte.
  25. 25. web-typografie martin hahn 2010 http://baselinecss.com http://www.alistapart.com/articles/settingtypeontheweb http://css-tricks.com/typographic-grid
  26. 26. web-typografie martin hahn 2010 Think vertical Ausreichend Zeilenabstand Abstand zwischen Absätzen Abstand zu Überschriften
  27. 27. web-typografie martin hahn 2010 Artikel klar gliedern
  28. 28. web-typografie martin hahn 2010 Weißraum Hilft die Seite zu strukturieren. Bietet dem User Orientierung. Zeigt inhaltliche Zusammenhänge auf.
  29. 29. web-typografie martin hahn 2010
  30. 30. web-typografie martin hahn 2010
  31. 31. mikrotypografie Ins Detail gehen.
  32. 32. web-typografie martin hahn 2010 Textauszeichnungen Schriftgröße Schriftart Schriftfarbe Schriftschnitt Versalien Hintergrundfarbe
  33. 33. web-typografie martin hahn 2010
  34. 34. web-typografie martin hahn 2010
  35. 35. web-typografie martin hahn 2010 Auszeichnungen... erhöhen die Lesbarkeit. strukturieren die Seite. stellen Inhaltliches heraus.
  36. 36. Fontastisch! Schriftarten -techniken
  37. 37. web-typografie martin hahn 2010 Variante Systemschriften Einfach mal den kleinsten gemeinsamen Nenner erhöhen. Gill Sans Georgia Impact Trebuchet MS Copperplate Tahoma Lucida Console Palatino Baskerville Optima ..und so ein paar Windows-Dinger... http://www.typetester.org http://flippingtypical.com
  38. 38. web-typografie martin hahn 2010 Variante Text als Bild “Wir müssen unsere Hausschrift benutzen!”
  39. 39. web-typografie martin hahn 2010 Variante Webfont-Services Neue Schriften braucht das Land.
  40. 40. web-typografie martin hahn 2010 http://typeface.neocracy.org http://typekit.com http://www.mikeindustries.com/blog/sifr http://cufon.shoqolate.com/generate http://www.fontsquirrel.com http://code.google.com/webfonts http://webfonts.fonts.com http://www.typotheque.com/webfonts http://www.fontslive.com http://fontdeck.com http://www.extensis.com/en/WebINK
  41. 41. typo als gestaltungsmittel
  42. 42. web-typografie martin hahn 2010
  43. 43. web-typografie martin hahn 2010
  44. 44. web-typografie martin hahn 2010
  45. 45. web-typografie martin hahn 2010
  46. 46. web-typografie martin hahn 2010
  47. 47. web-typografie martin hahn 2010
  48. 48. und warum?
  49. 49. web-typografie martin hahn 2010 Schlechte Typo Gute Typo unorganisiert unstrukturiert unlesbar
  50. 50. web-typografie martin hahn 2010 Gute Typografie kann den Unterschied machen zwischen verstehen oder mißverstehen mit Inhalt beschäftigen oder Inhalt ignorieren Freude oder Enttäuschung
  51. 51. Typography is not on the Web, it is the Web. Mark Boulton, FOWD London 2009
  52. 52. danke sagt martin hahn hahnsinn.de martin@hahnsinn.de slideshare.net/hahnsinn

×