Web
typografie
Mehr als Arial oder Helvetica
web-typografie martin hahn 2010




                 Typografie für digitale Texte

                 Typografie bezweckt, ...
Status quo
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010




             Kommt einem irgendwie bekannt vor…
web-typografie martin hahn 2010




             Status quo
             Webdesign & Webtypografie
             Konzentrat...
Die Folgen...
web-typografie martin hahn 2010




    „User wollen keine Texte lesen!“
Also besser machen!
was?
web-typografie martin hahn 2010




                       Am Anfang...




                                      war die ...
web-typografie martin hahn 2010




                             Readability:

                              Texte organis...
wie?
Makrotypografie
Das große Ganze sehen.
web-typografie martin hahn 2010




                        Texte organisieren
                        Content Usability
 ...
web-typografie martin hahn 2010
web-typografie martin hahn 2010




        Pageflow 
        Readability
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010




                                  Raster / Spalten
web-typografie martin hahn 2010




             http://960.gs                               http://gridinator.com
       ...
web-typografie martin hahn 2010




                     Grundlinienraster
                      Im Print Standard, im Web...
web-typografie martin hahn 2010




  http://baselinecss.com
  http://www.alistapart.com/articles/settingtypeontheweb
  ht...
web-typografie martin hahn 2010




           Think vertical
            Ausreichend Zeilenabstand
            Abstand zw...
web-typografie martin hahn 2010




                          Artikel klar gliedern
web-typografie martin hahn 2010




                     Weißraum
                      Hilft die Seite zu strukturieren.
...
web-typografie martin hahn 2010
web-typografie martin hahn 2010
mikrotypografie
Ins Detail gehen.
web-typografie martin hahn 2010




               Textauszeichnungen
                   Schriftgröße
                   S...
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010




                              Auszeichnungen...
                              erhöhen ...
Fontastisch!
Schriftarten  -techniken
web-typografie martin hahn 2010




          Variante Systemschriften
          Einfach mal den kleinsten gemeinsamen Nen...
web-typografie martin hahn 2010




          Variante Text als Bild
          “Wir müssen unsere Hausschrift benutzen!”
web-typografie martin hahn 2010




                          Variante Webfont-Services
                           Neue Sc...
web-typografie martin hahn 2010




                         http://typeface.neocracy.org
                         http://...
typo als
gestaltungsmittel
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
und warum?
web-typografie martin hahn 2010




          Schlechte Typo Gute Typo
                                  unorganisiert
   ...
web-typografie martin hahn 2010




                          Gute Typografie kann den
                        Unterschied...
Typography is not on the Web,
  it is the Web.
                Mark Boulton, FOWD London 2009
danke sagt
martin hahn
hahnsinn.de
martin@hahnsinn.de
slideshare.net/hahnsinn
Nächste SlideShare
Wird geladen in …5
×

Webtypografie

4.775 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.775
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
30
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

×