Das Dokument behandelt die Grundlagen und Trends der Webtypografie, definiert Typografie und deren Bedeutung im Kontext der Kommunikation und Nutzererfahrung. Es zeigt Werkzeuge, Design-Regeln und Tipps zur Gestaltung und Strukturierung von Texten auf Webseiten, inklusive der Verwendung von Layout-Rastern, Schriftarten und Kontrasten. Darüber hinaus werden moderne Techniken zur Schriftbindung und CSS3-Funktionen zur Textgestaltung erörtert.

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

2. …auch das ist Typografie!

3. Web TypografieWas ist Typografie?Tipps und GrundlagenAusblick 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ängigMediumTechnologieFormatMaterialLeser / PublikumUmgebungPersönliche StimmungVorlieben / InteressenAutor / AbsenderArt der InformationVerwendungszweckAbsicht

16. Was ist Typografie?Typografie ist SpracheWorteSätzeAbsätzeAbschnitteKapitelDokument

17. AutorStrukturiert die Informationen nach seinem eigenen mentalen Modell Was ist Typografie?Typografie ist KommunikationDesignerVerbindet beide Modelle mit Hilfe von etablierten Regeln und ErfahrungLeserVerarbeitet die Informationen nach seinem eigenen mentalen Modell

18. Was ist Typografie?Typografie ist StrukturÜberschriftenSeitentitel <title>Kapiteltitel <h1>Haupttitel <h2>Zwischentitel <h3>Titel 4. Ordnung <h4>Titel 5. Ordnung <h5>Titel 6. Ordnung <h6>Absätze & ListenNormaler Absatz <p>Ausdruck <dfn>Code <code>Code-Abschnitt <samp>Variable <var>Zitat <blockquote>Quelle <cite>Liste <ul>Auflistung <ol>Definitionsliste <dl><dt><dd>…TextauszeichnungHervorhebung <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

35. Gestaltungsraster960 Grid - 12er RasterFixe Breite von max. 960 Pixel

36. Zentriertes Layout

37. 12er, 16er oder 24er Teilung

38. Flexibilität in der Gestaltung und Anordnung der ElementeToolsBlueprint Grid CSS GeneratorWebsite zur Berechnung verschiedener Abständen und Rasterteilung.Erzeugt auch eine entsprechende CSS-Dateibgg.kematzy.com/www.blueprintcss.org/

39. ToolsBoksAdobe Air Applikation zur Berechnung von beliebigen Rastern Inkl. CSS-Dateiwww.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ände10 bis 15 Worte je Zeile sind optimalZeilenabstand von 133-150% der Schriftgrösse ist idealGrössere Textbreite bedingt einen grösseren Zeilenabstand

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

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

46. Grundlagen und TippsSpationierung«Yes, wekern»

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

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

49. Grundlagen und TippsVersalien«TheNext BIG Thing»

50. VersalienHeadlineswww.tputh.com/

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

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

53. FarbkontrasteGrundlagen und WAIZu starke Kontraste sind unangenehmSchriftglättung (Anti-Alias) bei hohen Kontrasten ist problematischKontraste können Inhalte strukturierenWAI Standards sind zu berücksichtigen

54. ToolColor ContrastAnalyzerForeground: #FFFFFF Background: #0E2859Thecontrastratiois: 14.1:1 Text passed at level AA

55. 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). Text passed at level AAA

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

57. ToolColor ContrastAnalyzerForeground: #A7A7A7 Background: #0E2859Thecontrastratiois: 6.0:1 Text passed at level AA

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

61. ToolColor ContrastAnalyzerForeground: #787878 Background: #0E2859Thecontrastratiois: 3.2:1 Text failed at level AA

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 / HintergrundKontrastverbesserung bei Mouseover / FocusAbgrenzung zur Umgebung

66. Grundlagen und TippsUnterstrichene Links«Think different»

67. Grundlagen und TippsUnterstrichene LinksProblem Steht zu dicht am Text

68. Hat die Farbe der Schrift= HässlichFakt Jeder erkennt die Funktion

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 loveYouSchriftartenTonalität

76. I loveYouSchriftartenTonalität

77. I loveYouSchriftartenTonalität

78. I kill YouSchriftartenTonalität

79. I kill YouSchriftartenTonalität

80. SchriftartenSerif

81. SchriftartenSans-Serif

82. SchriftartenMonospace

83. SchriftartenCursive

84. SchriftartenDecorative

85. Toolsflippingtypical.com

86. ToolsTypetesterwww.typetester.org/

87. Toolcsstypesethttp://csstypeset.com/

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

89. Grundlagen und TippsNathan Ford‘sBetter Font Stacks

90. Grundlagen und TippsNathan Ford‘sBetter Font Stacks1234Ideal Alternative Verbreitet GenerischWeitere Beispiele: www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/

91. Grundlagen und TippsFallstrickenZu beachten sind:LaufweiteSonderzeichenZeichensätze

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

93. ToolFont StackBuilderwww.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 – sIFRProOpenType- und TrueType-Schriftensind geeignetVorteil gegenüber Bildern bei Suchmaschinen und BarrierefreiheitText ist skalierbarText kann selektiert und kopiert werden

98. Ausblick und TrendsSchriftenenbindung mit Javascript – sIFRContraPerformanceproblem bei mehr als zehn Elementen pro SeiteBenötigt Flash (iPad, iPhone)Beschränkung bei nicht lateinischen Alphabeten Keine DruckfunktionTransparente Hintergründe werden bei IE6 nicht unterstützt

99. Ausblick und TrendsSchriftenenbindung mit Javascript – sIFRsIFR GeneratorErstellt aus TrueType und OpenType Schriften die entsprechende SWF-Dateiwww.sifrgenerator.com/wizard2.html

100. Ausblick und TrendsSchriftenenbindung mit Javascript – CufonProGute PerformanceKommt ohne Flash aus (iPad, iPhone)Text ist skalierbarGrosse Auswahl an SchriftenGute Optimierungsmöglichkeit beim Zusammenstellen der Zeichen

101. Ausblick und TrendsSchriftenenbindung mit Javascript – CufonContraEingeschränkte InteraktivitätBeschränkung bei nicht lateinischen Alphabeten Text lässt sich nicht kopieren

102. Ausblick und TrendsSchriftenenbindung mit Javascript – CufonCufon GeneratorErstellt aus TrueType und OpenType Schriften die entsprechende Javascript-DateiUntergruppen 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)