Antipasti Typografie im Allgemeinen Ein Rückblick vom Buchdruck bis Brody frisch garniert mit einigen Beispielen Primi Piatti Web-Typografie im Besonderen HTML Basics mit einem Schuss Best Practices Secondi Piatti Tipps und Tools Variationen zu Farbe, Raum und Schrift nach Laune des Chefs Dolci Trends und Ausblick Chancen und Möglichkeiten von Mobile Devices, HTML 5 und Flash

1. Claus Medvesek. 14. April 2010. Design. Kantine. Web Typografie. Namics.

2. …auch das ist Typografie!

3. Web Typografie Was ist Typografie? Tipps und Grundlagen Ausblick und Trends

4. Was ist Typografie? „Typographie ist: Auswählen, Gliedern, Anordnen und logisch Lesbarmachen von Schrift.“ (Kurt Weidemann)

5. Was ist Typografie?Typografie in Print

6. Was ist Typografie?Typografie in Print

7. Was ist Typografie?Typografie in Print

8. Was ist Typografie?Typografie in Print

9. Was ist Typografie?Typografie in Print

10. Was ist Typografie?Typografie in Print

11. Was ist Typografie?Typografie in Print

12. Was ist Typografie?Typografie in Print

13. Was ist Typografie?Typografie in Print

14. Was ist Typografie?Typografie in Print

15. Was ist Typografie?Typografie ist kontextabhängig Medium Technologie Format Material Leser / Publikum Umgebung Persönliche Stimmung Vorlieben / Interessen Autor / Absender Art der Information Verwendungszweck Absicht

16. Was ist Typografie?Typografie ist Sprache Worte Sätze Absätze Abschnitte Kapitel Dokument

17. Autor Strukturiert die Informationen nach seinem eigenen mentalen Modell Was ist Typografie?Typografie ist Kommunikation Designer Verbindet beide Modelle mit Hilfe von etablierten Regeln und Erfahrung Leser Verarbeitet die Informationen nach seinem eigenen mentalen Modell

18. Was ist Typografie?Typografie ist Struktur Überschriften Seitentitel <title> Kapiteltitel <h1> Haupttitel <h2> Zwischentitel <h3> Titel 4. Ordnung <h4> Titel 5. Ordnung <h5> Titel 6. Ordnung <h6> Absätze & Listen Normaler Absatz <p> Ausdruck <dfn> Code <code> Code-Abschnitt <samp> Variable <var> Zitat <blockquote> Quelle <cite> Liste <ul> Auflistung <ol> Definitionsliste <dl><dt><dd> … Textauszeichnung Hervorhebung <strong> Betonung <em> Bold / fett <b> Italic / kursiv <i> Big / Gross <big> Small / klein <small> Teletext <tt> Hochgestellt <sup> Tiefgestellt <sub> …

19. Was ist Typografie?Typografie ist das Web «Typographyisnot on the Web, it IS the Web» Mark Boulton, FOWD London 2009

20. Was ist Typografie?Typografie im Web

21. Was ist Typografie?Typografie im Web

22. Was ist Typografie?Typografie im Web

23. Was ist Typografie?Typografie im Web

24. Was ist Typografie?Typografie im Web

25. Was ist Typografie?Typografie im Web

26. Was ist Typografie?Typografie im Web

27. Was ist Typografie?Typografie im Web

28. Was ist Typografie?Typografie im Web

29. Was ist Typografie?Typografie im Web

30. Was ist Typografie?Typografie im Web

31. Was ist Typografie?Typografie ist Benutzererlebnis «Good typographyimprovesuserexperience»

32. Grundlagen und Tipps

33. Grundlagen und TippsGestaltungsraster «Auch Text braucht Luft zum Atmen»

34. Gestaltungsraster960 Grid - 24er Raster

36. Zentriertes Layout

37. 12er, 16er oder 24er Teilung

39. ToolsBoks Adobe Air Applikation zur Berechnung von beliebigen Rastern Inkl. CSS-Datei www.toki-woki.net/p/Boks/

40. GestaltungsrasterBeispiel

41. GestaltungsrasterBeispiel

42. Grundlagen und TippsGrössen und Abstände «Mut zur Lücke»

43. Grössen und AbständeTextbreite und Zeilenabstände 10 bis 15 Worte je Zeile sind optimal Zeilenabstand von 133-150% der Schriftgrösse ist ideal Grössere Textbreite bedingt einen grösseren Zeilenabstand

44. Grössen und AbständeAbsatzformatierung – Abstand nach einem Absatz p { margin-bottom:1.25em } Abstand = min. 2/3 der Zeilenhöhe

45. Grössen und AbständeAbsatzformatierung – Einrückung mittels erster Zeile p { margin-bottom:0 } p + p { text-indent:1em; margin-top:0 } Einrückung = min. Zeilenhöhe

46. Grundlagen und TippsSpationierung «Yes, wekern»

47. VersalienHeadlines www.prospermag.com/article/284-162 www.akzonobel.com/corporate_governance/supervisory_board/

48. SpationierungPSD vs HTML/CSS Einheit: Pixel oder em PSD-Mockup 100 = 0.1em (CSS)

49. Grundlagen und TippsVersalien «TheNext BIG Thing»

50. VersalienHeadlines www.tputh.com/

51. VersalienKategorieüberschriften www.virgin.com/richard-branson/blog/ www.typenuts.com/

52. Grundlagen und TippsFarbkontraste «Bei Nacht sind alle Katzen grau»

53. FarbkontrasteGrundlagen und WAI Zu starke Kontraste sind unangenehm Schriftglättung (Anti-Alias) bei hohen Kontrasten ist problematisch Kontraste können Inhalte strukturieren WAI Standards sind zu berücksichtigen

56. Large text passed at level AAAGuideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and images of text has a contrastratio of at least 7:1 (Level AAA). www.paciellogroup.com

58. Large text passed at level AAGuideline 1.4.3: Contrast (Minimum) - WCAG 2 Thevisualpresentation of text and images of text has a contrastratio of at least 4.5:1 (Level AA).

59. Text failed at level AAA

60. Large text passed at level AAAGuideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and images of text has a contrastratio of at least 7:1 (Level AAA).www.paciellogroup.com

62. Large text passed at level AAGuideline 1.4.3: Contrast (Minimum) - WCAG 2 Thevisualpresentation of text and images of text has a contrastratio of at least 4.5:1 (Level AA).

63. Text failed at level AAA

64. Large text failed at level AAAGuideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and images of text has a contrastratio of at least 7:1 (Level AAA).www.paciellogroup.com

65. FarbkontrasteVordergrund / Hintergrund Kontrastverbesserung bei Mouseover / Focus Abgrenzung zur Umgebung

66. Grundlagen und TippsUnterstrichene Links «Think different»

69. Wird von Nielsen empfohlen= Es funktioniert

70. Unterstrichene LinksDie Lösung a {text-decoration: none; border-bottom: 1px }

71. Unterstrichene LinksDie Lösung – mehr Abstand

72. Unterstrichene LinksDie Lösung - gepunktet

73. Unterstrichene LinksDie Lösung - gestrichelt

74. Grundlagen und TippsSchriftarten «Es muss nicht immer Arial sein»

75. I loveYou SchriftartenTonalität

76. I loveYou SchriftartenTonalität

77. I loveYou SchriftartenTonalität

78. I kill You SchriftartenTonalität

79. I kill You SchriftartenTonalität

80. SchriftartenSerif

81. SchriftartenSans-Serif

82. SchriftartenMonospace

83. SchriftartenCursive

84. SchriftartenDecorative

85. Toolsflippingtypical.com

86. ToolsTypetester www.typetester.org/

87. Toolcsstypeset http://csstypeset.com/

88. Grundlagen und TippsFontstacks «One Font doesn‘t fit all» Problem Je nach Betriebssystem und Software sind verschiedene Schriften installiert. Lösung Es werden mehrere Schriften im CSS definiert.

89. Grundlagen und TippsNathan Ford‘sBetter Font Stacks

90. Grundlagen und TippsNathan Ford‘sBetter Font Stacks 1 2 3 4 Ideal Alternative Verbreitet Generisch Weitere Beispiele: www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/

91. Grundlagen und TippsFallstricken Zu beachten sind: Laufweite Sonderzeichen Zeichensätze

92. ToolWeb-safe Fonts www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/

93. ToolFont StackBuilder www.codestyle.org/servlets/FontStack

94. Ausblick und Trends

95. Ausblick und TrendsSchriftenenbindung mit Javascript «Web Font Fight Club» (Teil 1)

96. Ausblick und TrendsSchriftenenbindung mit Javascript

97. Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR Pro OpenType- und TrueType-Schriftensind geeignet Vorteil gegenüber Bildern bei Suchmaschinen und Barrierefreiheit Text ist skalierbar Text kann selektiert und kopiert werden

98. Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR Contra Performanceproblem bei mehr als zehn Elementen pro Seite Benötigt Flash (iPad, iPhone) Beschränkung bei nicht lateinischen Alphabeten Keine Druckfunktion Transparente Hintergründe werden bei IE6 nicht unterstützt

99. Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR sIFR Generator Erstellt aus TrueType und OpenType Schriften die entsprechende SWF-Datei www.sifrgenerator.com/wizard2.html

100. Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon Pro Gute Performance Kommt ohne Flash aus (iPad, iPhone) Text ist skalierbar Grosse Auswahl an Schriften Gute Optimierungsmöglichkeit beim Zusammenstellen der Zeichen

101. Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon Contra Eingeschränkte Interaktivität Beschränkung bei nicht lateinischen Alphabeten Text lässt sich nicht kopieren

102. Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon Cufon Generator Erstellt aus TrueType und OpenType Schriften die entsprechende Javascript-Datei Untergruppen auch für Kyrillische und koptische Schriften möglich. cufon.shoqolate.com/generate/

103. Ausblick und TrendsSchrifteinbindung mit CSS (font-face) «Web Font Fight Club» (Teil 2)

104. Ausblick und TrendsSchrifteinbindung mit CSS (font-face) Einbinden von Zeichensätzen mittels @font-face. www.zenelements.com/blog/css3-embed-font-face/ und www.css3.info/preview/web-fonts-with-font-face/

105. Ausblick und TrendsSchrifteinbindung mit CSS (font-face) Pro Einfach und unkompliziert Kein Flash Kein Javascript Kompatible mit CSS Transformationen Keine Beschränkung der Interaktivität Unterstützt von allen aktuellen Browsern

106. Ausblick und TrendsSchrifteinbindung mit CSS (font-face) Contra Datei wird bei umfangreichen Zeichensätze sehr gross ( >1MB) Allerdings: Lizenzproblem!!!

107. Ausblick und TrendsLösung 1: Freiverfügbare Schriften Quellen: www.fontsquirrel.com www.theleagueofmoveabletype.com www.webfonts.info www.dafont.com www.cape-arcona.com/ www.abstractfonts.com www.identifont.com/free-fonts.html www.ingofonts.de/ingofonts/fonts/freefonts.html www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/

108. Ausblick und TrendsLösung 2: Web-Services für Schrifteinbindung Pro Schriftinformation ist codiert –> Rechtssicherheit Daten sind komprimiert –> gute Performance Schnelle und einfache Integration –> Unkompliziert Contra Serverausfall Unterschiedliche Preismodelle (Abo oder Fixpreis) keine Schriftenklassiker

109. Ausblick und TrendsWeb-Services für Schrifteinbindung Anbieter Typekit – www.typekit.com Typotheque – www.typotheque.com Kernest – www.kernest.com Fontdeck – www.fontdeck.com

110. Ausblick und TrendsCSS 3 – Mehrspaltiger Text «Die HTML 5.0»

111. Ausblick und TrendsCSS 3 – Mehrspaltiger Text Mehrspaltiger Text inkl. vertikaler Trennlininen und zusätzlichen Einstellungen für den Blocksatz (auto, inter-word, inter-ideograph, inter-cluster, distribute, kashida) www.zenelements.com/blog/css3-multiple-columns/

112. Ausblick und TrendsCSS 3 – Textschatten (text-shadow) text-shadow: ApxBpxCpx #XXX; - Apx = x-Achse - Bpx = y-Achse - Cpx = Weichzeichnen - #XXX = HEX-Farbwert www.westciv.com/tools/shadows/

113. Ausblick und TrendsCSS 3 – Textschatten (text-shadow)

114. Ausblick und TrendsCSS 3 – Textlinie -webkit-text-stroke: Apx #XXX; -webkit-text-fill-color: #XXX - Apx = Strichstärke - #XXX = HEX-Farbwert www.westciv.com/tools/textStroke/

115. Ausblick und TrendsCSS 3 Web-Kit – Showcase www.tylergaw.com/lab/themanfromhollywood/

116. Claus Medvesek. Senior AD UX. 14. April 2010. Design. Kantine. Web Typografie. Namics.