1. Web
typografie
Mehr als Arial oder Helvetica

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. Status quo

4. web-typografie martin hahn 2010

5. web-typografie martin hahn 2010

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

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. Die Folgen...

9. web-typografie martin hahn 2010
„User wollen keine Texte lesen!“

10. Also besser machen!

11. was?

12. web-typografie martin hahn 2010
Am Anfang...
war die Lesbarkeit.

13. web-typografie martin hahn 2010
Readability:
Texte organisieren!
Texte scanbar machen!
Texte lesbar machen!
Auszeichnungen einsetzen

14. wie?

15. Makrotypografie
Das große Ganze sehen.

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. web-typografie martin hahn 2010

18. web-typografie martin hahn 2010
Pageflow
Readability

19. web-typografie martin hahn 2010

20. web-typografie martin hahn 2010

21. web-typografie martin hahn 2010

22. web-typografie martin hahn 2010
Raster / Spalten

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. web-typografie martin hahn 2010
Grundlinienraster
Im Print Standard, im Web ein Fremdwort.
Vertikale Ausrichtung der Inhalte.

25. web-typografie martin hahn 2010
http://baselinecss.com
http://www.alistapart.com/articles/settingtypeontheweb
http://css-tricks.com/typographic-grid

26. web-typografie martin hahn 2010
Think vertical
Ausreichend Zeilenabstand
Abstand zwischen Absätzen
Abstand zu Überschriften

27. web-typografie martin hahn 2010
Artikel klar gliedern

28. web-typografie martin hahn 2010
Weißraum
Hilft die Seite zu strukturieren.
Bietet dem User Orientierung.
Zeigt inhaltliche Zusammenhänge auf.

29. web-typografie martin hahn 2010

30. web-typografie martin hahn 2010

31. mikrotypografie
Ins Detail gehen.

32. web-typografie martin hahn 2010
Textauszeichnungen
Schriftgröße
Schriftart
Schriftfarbe
Schriftschnitt
Versalien
Hintergrundfarbe

33. web-typografie martin hahn 2010

34. web-typografie martin hahn 2010

35. web-typografie martin hahn 2010
Auszeichnungen...
erhöhen die Lesbarkeit.
strukturieren die Seite.
stellen Inhaltliches heraus.

36. Fontastisch!
Schriftarten -techniken

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. web-typografie martin hahn 2010
Variante Text als Bild
“Wir müssen unsere Hausschrift benutzen!”

39. web-typografie martin hahn 2010
Variante Webfont-Services
Neue Schriften braucht das Land.

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. typo als
gestaltungsmittel

42. web-typografie martin hahn 2010

43. web-typografie martin hahn 2010

44. web-typografie martin hahn 2010

45. web-typografie martin hahn 2010

46. web-typografie martin hahn 2010

47. web-typografie martin hahn 2010

48. und warum?

49. web-typografie martin hahn 2010
Schlechte Typo Gute Typo
unorganisiert
unstrukturiert
unlesbar

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. Typography is not on the Web,
it is the Web.
Mark Boulton, FOWD London 2009

52. danke sagt
martin hahn
hahnsinn.de
martin@hahnsinn.de
slideshare.net/hahnsinn