Claus Medvesek.<br />14. April 2010. Design. Kantine. Web Typografie. Namics. <br />
…auch das ist Typografie!<br />
Web Typografie<br />Was ist Typografie?<br />Tipps und Grundlagen<br />Ausblick und Trends<br />
Was ist Typografie?<br />„Typographie ist: Auswählen, Gliedern, Anordnen und logisch Lesbarmachen von Schrift.“<br />(Kurt...
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie in Print<br />
Was ist Typografie?Typografie ist kontextabhängig<br />Medium<br />Technologie<br />Format<br />Material<br />Leser / Publ...
Was ist Typografie?Typografie ist Sprache<br />Worte<br />Sätze<br />Absätze<br />Abschnitte<br />Kapitel<br />Dokument<br />
Autor<br />Strukturiert die Informationen nach seinem eigenen mentalen Modell <br />Was ist Typografie?Typografie ist Komm...
Was ist Typografie?Typografie ist Struktur<br />Überschriften<br />Seitentitel	<title><br />Kapiteltitel	<h1><br />Hauptti...
Was ist Typografie?Typografie ist das Web<br />«Typographyisnot on the Web, it IS the Web»<br />Mark Boulton, FOWD London ...
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie im Web<br />
Was ist Typografie?Typografie ist Benutzererlebnis<br />«Good typographyimprovesuserexperience»<br />
Grundlagen und Tipps<br />
Grundlagen und TippsGestaltungsraster<br />«Auch Text braucht Luft zum Atmen»<br />
Gestaltungsraster960 Grid - 24er Raster<br />
Gestaltungsraster960 Grid - 12er Raster<br /><ul><li>Fixe Breite von max. 960 Pixel
Zentriertes Layout
12er, 16er oder 24er Teilung
Flexibilität in der Gestaltung und Anordnung der Elemente</li></li></ul><li>ToolsBlueprint Grid CSS Generator<br />Website...
ToolsBoks<br />Adobe Air Applikation zur Berechnung von beliebigen Rastern <br />Inkl. CSS-Datei<br />www.toki-woki.net/p/...
GestaltungsrasterBeispiel<br />
GestaltungsrasterBeispiel<br />
Grundlagen und TippsGrössen und Abstände<br />«Mut zur Lücke»<br />
Grössen und AbständeTextbreite und Zeilenabstände<br />10 bis 15 Worte je Zeile sind optimal<br />Zeilenabstand von 133-15...
Grössen und AbständeAbsatzformatierung – Abstand nach einem Absatz<br />p { margin-bottom:1.25em }<br />Abstand = min. 2/3...
Grössen und AbständeAbsatzformatierung – Einrückung mittels erster Zeile<br />p { margin-bottom:0 }<br />p + p { text-inde...
Grundlagen und TippsSpationierung<br />«Yes, wekern»<br />
VersalienHeadlines<br />www.prospermag.com/article/284-162<br />www.akzonobel.com/corporate_governance/supervisory_board/<...
SpationierungPSD vs HTML/CSS<br />Einheit: Pixel oder em<br />PSD-Mockup 100 = 0.1em (CSS)<br />
Grundlagen und TippsVersalien<br />«TheNext BIG Thing»<br />
VersalienHeadlines<br />www.tputh.com/<br />
VersalienKategorieüberschriften<br />www.virgin.com/richard-branson/blog/<br />www.typenuts.com/<br />
Grundlagen und TippsFarbkontraste<br />«Bei Nacht sind alle Katzen grau»<br />
FarbkontrasteGrundlagen und WAI<br />Zu starke Kontraste sind unangenehm<br />Schriftglättung (Anti-Alias) bei hohen Kontr...
ToolColor ContrastAnalyzer<br />Foreground: #FFFFFF <br />Background: #0E2859<br />Thecontrastratiois: 14.1:1<br /><ul><li...
 Large text passed at level AA</li></ul>Guideline 1.4.3: Contrast (Minimum) - WCAG 2 Thevisualpresentation of text and ima...
 Large text passed at level AAA</li></ul>Guideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and i...
ToolColor ContrastAnalyzer<br />Foreground: #A7A7A7 <br />Background: #0E2859<br />Thecontrastratiois: 6.0:1<br /><ul><li>...
 Large text passed at level AAGuideline 1.4.3: Contrast (Minimum) - WCAG 2 Thevisualpresentation of text and images of tex...
 Text failed at level AAA
 Large text passed at level AAAGuideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and images of t...
ToolColor ContrastAnalyzer<br />Foreground: #787878 <br />Background: #0E2859<br />Thecontrastratiois: 3.2:1<br /><ul><li>...
 Large text passed at level AAGuideline 1.4.3: Contrast (Minimum) - WCAG 2 Thevisualpresentation of text and images of tex...
 Text failed at level AAA
 Large text failed at level AAAGuideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and images of t...
FarbkontrasteVordergrund / Hintergrund<br />Kontrastverbesserung bei Mouseover / Focus<br />Abgrenzung zur Umgebung<br />
Grundlagen und TippsUnterstrichene Links<br />«Think different»<br />
Grundlagen und TippsUnterstrichene Links<br />Problem<br /><ul><li> Steht zu dicht am Text
 Hat die Farbe der Schrift</li></ul>= Hässlich<br />Fakt<br /><ul><li> Jeder erkennt die Funktion
 Wird von Nielsen empfohlen</li></ul>= Es funktioniert<br />
Unterstrichene LinksDie Lösung <br />a {text-decoration: none;<br />border-bottom: 1px }<br />
Unterstrichene LinksDie Lösung – mehr Abstand<br />
Unterstrichene LinksDie Lösung - gepunktet<br />
Unterstrichene LinksDie Lösung - gestrichelt<br />
Grundlagen und TippsSchriftarten<br />«Es muss nicht immer Arial sein»<br />
 I loveYou<br />SchriftartenTonalität<br />
 I loveYou<br />SchriftartenTonalität<br />
 I loveYou<br />SchriftartenTonalität<br />
 I kill You<br />SchriftartenTonalität<br />
 I kill You<br />SchriftartenTonalität<br />
SchriftartenSerif<br />
SchriftartenSans-Serif<br />
SchriftartenMonospace<br />
SchriftartenCursive<br />
SchriftartenDecorative<br />
Toolsflippingtypical.com<br />
ToolsTypetester<br />www.typetester.org/<br />
Toolcsstypeset<br />http://csstypeset.com/<br />
Grundlagen und TippsFontstacks<br />«One Font doesn‘t fit all»<br />Problem<br />Je nach Betriebssystem und Software sind ...
Grundlagen und TippsNathan Ford‘sBetter Font Stacks<br />
Grundlagen und TippsNathan Ford‘sBetter Font Stacks<br />1<br />2<br />3<br />4<br />Ideal<br /> Alternative<br /> Verbrei...
Grundlagen und TippsFallstricken<br />Zu beachten sind:<br />Laufweite<br />Sonderzeichen<br />Zeichensätze<br />
ToolWeb-safe Fonts <br />www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/<br />
ToolFont StackBuilder<br />www.codestyle.org/servlets/FontStack<br />
Ausblick und Trends<br />
Ausblick und TrendsSchriftenenbindung mit Javascript<br />«Web Font Fight Club»<br />(Teil 1)<br />
Ausblick und TrendsSchriftenenbindung mit Javascript<br />
Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR<br />Pro<br />OpenType- und TrueType-Schriftensind geeignet<br...
Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR<br />Contra<br />Performanceproblem bei mehr als zehn Elemente...
Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR<br />sIFR Generator<br />Erstellt aus TrueType und OpenType Sc...
Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon<br />Pro<br />Gute Performance<br />Kommt ohne Flash aus (iPa...
Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon<br />Contra<br />Eingeschränkte Interaktivität<br />Beschränk...
Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon<br />Cufon Generator<br />Erstellt aus TrueType und OpenType ...
Ausblick und TrendsSchrifteinbindung mit CSS (font-face)<br />«Web Font Fight Club»<br />(Teil 2)<br />
Nächste SlideShare
Wird geladen in …5
×

Design. Kantine. Web Typography. Namics.

5.239 Aufrufe

Veröffentlicht am

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

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
5.239
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2.564
Aktionen
Geteilt
0
Downloads
30
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Design. Kantine. Web Typography. Namics.

  1. 1. Claus Medvesek.<br />14. April 2010. Design. Kantine. Web Typografie. Namics. <br />
  2. 2. …auch das ist Typografie!<br />
  3. 3. Web Typografie<br />Was ist Typografie?<br />Tipps und Grundlagen<br />Ausblick und Trends<br />
  4. 4. Was ist Typografie?<br />„Typographie ist: Auswählen, Gliedern, Anordnen und logisch Lesbarmachen von Schrift.“<br />(Kurt Weidemann)<br />
  5. 5. Was ist Typografie?Typografie in Print<br />
  6. 6. Was ist Typografie?Typografie in Print<br />
  7. 7. Was ist Typografie?Typografie in Print<br />
  8. 8. Was ist Typografie?Typografie in Print<br />
  9. 9. Was ist Typografie?Typografie in Print<br />
  10. 10. Was ist Typografie?Typografie in Print<br />
  11. 11. Was ist Typografie?Typografie in Print<br />
  12. 12. Was ist Typografie?Typografie in Print<br />
  13. 13. Was ist Typografie?Typografie in Print<br />
  14. 14. Was ist Typografie?Typografie in Print<br />
  15. 15. Was ist Typografie?Typografie ist kontextabhängig<br />Medium<br />Technologie<br />Format<br />Material<br />Leser / Publikum<br />Umgebung<br />Persönliche Stimmung<br />Vorlieben / Interessen<br />Autor / Absender<br />Art der Information<br />Verwendungszweck<br />Absicht <br />
  16. 16. Was ist Typografie?Typografie ist Sprache<br />Worte<br />Sätze<br />Absätze<br />Abschnitte<br />Kapitel<br />Dokument<br />
  17. 17. Autor<br />Strukturiert die Informationen nach seinem eigenen mentalen Modell <br />Was ist Typografie?Typografie ist Kommunikation<br />Designer<br />Verbindet beide Modelle mit Hilfe von etablierten Regeln und Erfahrung<br />Leser<br />Verarbeitet die Informationen nach seinem eigenen mentalen Modell <br />
  18. 18. Was ist Typografie?Typografie ist Struktur<br />Überschriften<br />Seitentitel <title><br />Kapiteltitel <h1><br />Haupttitel <h2><br />Zwischentitel <h3><br />Titel 4. Ordnung <h4><br />Titel 5. Ordnung <h5><br />Titel 6. Ordnung <h6><br />Absätze & Listen<br />Normaler Absatz <p><br />Ausdruck <dfn><br />Code <code><br />Code-Abschnitt <samp><br />Variable <var><br />Zitat <blockquote><br />Quelle <cite><br />Liste <ul><br />Auflistung <ol><br />Definitionsliste <dl><dt><dd><br />…<br />Textauszeichnung<br />Hervorhebung <strong><br />Betonung <em><br />Bold / fett <b><br />Italic / kursiv <i><br />Big / Gross <big><br />Small / klein <small><br />Teletext <tt><br />Hochgestellt <sup><br />Tiefgestellt <sub><br />…<br />
  19. 19. Was ist Typografie?Typografie ist das Web<br />«Typographyisnot on the Web, it IS the Web»<br />Mark Boulton, FOWD London 2009<br />
  20. 20. Was ist Typografie?Typografie im Web<br />
  21. 21. Was ist Typografie?Typografie im Web<br />
  22. 22. Was ist Typografie?Typografie im Web<br />
  23. 23. Was ist Typografie?Typografie im Web<br />
  24. 24. Was ist Typografie?Typografie im Web<br />
  25. 25. Was ist Typografie?Typografie im Web<br />
  26. 26. Was ist Typografie?Typografie im Web<br />
  27. 27. Was ist Typografie?Typografie im Web<br />
  28. 28. Was ist Typografie?Typografie im Web<br />
  29. 29. Was ist Typografie?Typografie im Web<br />
  30. 30. Was ist Typografie?Typografie im Web<br />
  31. 31. Was ist Typografie?Typografie ist Benutzererlebnis<br />«Good typographyimprovesuserexperience»<br />
  32. 32. Grundlagen und Tipps<br />
  33. 33. Grundlagen und TippsGestaltungsraster<br />«Auch Text braucht Luft zum Atmen»<br />
  34. 34. Gestaltungsraster960 Grid - 24er Raster<br />
  35. 35. Gestaltungsraster960 Grid - 12er Raster<br /><ul><li>Fixe Breite von max. 960 Pixel
  36. 36. Zentriertes Layout
  37. 37. 12er, 16er oder 24er Teilung
  38. 38. Flexibilität in der Gestaltung und Anordnung der Elemente</li></li></ul><li>ToolsBlueprint Grid CSS Generator<br />Website zur Berechnung verschiedener Abständen und Rasterteilung.<br />Erzeugt auch eine entsprechende CSS-Datei<br />bgg.kematzy.com/<br />www.blueprintcss.org/<br />
  39. 39. ToolsBoks<br />Adobe Air Applikation zur Berechnung von beliebigen Rastern <br />Inkl. CSS-Datei<br />www.toki-woki.net/p/Boks/<br />
  40. 40. GestaltungsrasterBeispiel<br />
  41. 41. GestaltungsrasterBeispiel<br />
  42. 42. Grundlagen und TippsGrössen und Abstände<br />«Mut zur Lücke»<br />
  43. 43. Grössen und AbständeTextbreite und Zeilenabstände<br />10 bis 15 Worte je Zeile sind optimal<br />Zeilenabstand von 133-150% der Schriftgrösse ist ideal<br />Grössere Textbreite bedingt einen grösseren Zeilenabstand<br />
  44. 44. Grössen und AbständeAbsatzformatierung – Abstand nach einem Absatz<br />p { margin-bottom:1.25em }<br />Abstand = min. 2/3 der Zeilenhöhe<br />
  45. 45. Grössen und AbständeAbsatzformatierung – Einrückung mittels erster Zeile<br />p { margin-bottom:0 }<br />p + p { text-indent:1em; margin-top:0 }<br />Einrückung = min. Zeilenhöhe<br />
  46. 46. Grundlagen und TippsSpationierung<br />«Yes, wekern»<br />
  47. 47. VersalienHeadlines<br />www.prospermag.com/article/284-162<br />www.akzonobel.com/corporate_governance/supervisory_board/<br />
  48. 48. SpationierungPSD vs HTML/CSS<br />Einheit: Pixel oder em<br />PSD-Mockup 100 = 0.1em (CSS)<br />
  49. 49. Grundlagen und TippsVersalien<br />«TheNext BIG Thing»<br />
  50. 50. VersalienHeadlines<br />www.tputh.com/<br />
  51. 51. VersalienKategorieüberschriften<br />www.virgin.com/richard-branson/blog/<br />www.typenuts.com/<br />
  52. 52. Grundlagen und TippsFarbkontraste<br />«Bei Nacht sind alle Katzen grau»<br />
  53. 53. FarbkontrasteGrundlagen und WAI<br />Zu starke Kontraste sind unangenehm<br />Schriftglättung (Anti-Alias) bei hohen Kontrasten ist problematisch<br />Kontraste können Inhalte strukturieren<br />WAI Standards sind zu berücksichtigen<br />
  54. 54. ToolColor ContrastAnalyzer<br />Foreground: #FFFFFF <br />Background: #0E2859<br />Thecontrastratiois: 14.1:1<br /><ul><li> Text passed at level AA
  55. 55. Large text passed at level AA</li></ul>Guideline 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).<br /><ul><li> Text passed at level AAA
  56. 56. Large text passed at level AAA</li></ul>Guideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and images of text has a contrastratio of at least 7:1 (Level AAA).<br />www.paciellogroup.com<br />
  57. 57. ToolColor ContrastAnalyzer<br />Foreground: #A7A7A7 <br />Background: #0E2859<br />Thecontrastratiois: 6.0:1<br /><ul><li> Text passed at level AA
  58. 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. 59. Text failed at level AAA
  60. 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).</li></ul>www.paciellogroup.com<br />
  61. 61. ToolColor ContrastAnalyzer<br />Foreground: #787878 <br />Background: #0E2859<br />Thecontrastratiois: 3.2:1<br /><ul><li> Text failed at level AA
  62. 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. 63. Text failed at level AAA
  64. 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).</li></ul>www.paciellogroup.com<br />
  65. 65. FarbkontrasteVordergrund / Hintergrund<br />Kontrastverbesserung bei Mouseover / Focus<br />Abgrenzung zur Umgebung<br />
  66. 66. Grundlagen und TippsUnterstrichene Links<br />«Think different»<br />
  67. 67. Grundlagen und TippsUnterstrichene Links<br />Problem<br /><ul><li> Steht zu dicht am Text
  68. 68. Hat die Farbe der Schrift</li></ul>= Hässlich<br />Fakt<br /><ul><li> Jeder erkennt die Funktion
  69. 69. Wird von Nielsen empfohlen</li></ul>= Es funktioniert<br />
  70. 70. Unterstrichene LinksDie Lösung <br />a {text-decoration: none;<br />border-bottom: 1px }<br />
  71. 71. Unterstrichene LinksDie Lösung – mehr Abstand<br />
  72. 72. Unterstrichene LinksDie Lösung - gepunktet<br />
  73. 73. Unterstrichene LinksDie Lösung - gestrichelt<br />
  74. 74. Grundlagen und TippsSchriftarten<br />«Es muss nicht immer Arial sein»<br />
  75. 75. I loveYou<br />SchriftartenTonalität<br />
  76. 76. I loveYou<br />SchriftartenTonalität<br />
  77. 77. I loveYou<br />SchriftartenTonalität<br />
  78. 78. I kill You<br />SchriftartenTonalität<br />
  79. 79. I kill You<br />SchriftartenTonalität<br />
  80. 80. SchriftartenSerif<br />
  81. 81. SchriftartenSans-Serif<br />
  82. 82. SchriftartenMonospace<br />
  83. 83. SchriftartenCursive<br />
  84. 84. SchriftartenDecorative<br />
  85. 85. Toolsflippingtypical.com<br />
  86. 86. ToolsTypetester<br />www.typetester.org/<br />
  87. 87. Toolcsstypeset<br />http://csstypeset.com/<br />
  88. 88. Grundlagen und TippsFontstacks<br />«One Font doesn‘t fit all»<br />Problem<br />Je nach Betriebssystem und Software sind verschiedene Schriften installiert.<br />Lösung<br />Es werden mehrere Schriften im CSS definiert.<br />
  89. 89. Grundlagen und TippsNathan Ford‘sBetter Font Stacks<br />
  90. 90. Grundlagen und TippsNathan Ford‘sBetter Font Stacks<br />1<br />2<br />3<br />4<br />Ideal<br /> Alternative<br /> Verbreitet<br /> Generisch<br />Weitere Beispiele: <br />www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/<br />
  91. 91. Grundlagen und TippsFallstricken<br />Zu beachten sind:<br />Laufweite<br />Sonderzeichen<br />Zeichensätze<br />
  92. 92. ToolWeb-safe Fonts <br />www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/<br />
  93. 93. ToolFont StackBuilder<br />www.codestyle.org/servlets/FontStack<br />
  94. 94. Ausblick und Trends<br />
  95. 95. Ausblick und TrendsSchriftenenbindung mit Javascript<br />«Web Font Fight Club»<br />(Teil 1)<br />
  96. 96. Ausblick und TrendsSchriftenenbindung mit Javascript<br />
  97. 97. Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR<br />Pro<br />OpenType- und TrueType-Schriftensind geeignet<br />Vorteil gegenüber Bildern bei Suchmaschinen und Barrierefreiheit<br />Text ist skalierbar<br />Text kann selektiert und kopiert werden<br />
  98. 98. Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR<br />Contra<br />Performanceproblem bei mehr als zehn Elementen pro Seite<br />Benötigt Flash (iPad, iPhone)<br />Beschränkung bei nicht lateinischen Alphabeten <br />Keine Druckfunktion<br />Transparente Hintergründe werden bei IE6 nicht unterstützt<br />
  99. 99. Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR<br />sIFR Generator<br />Erstellt aus TrueType und OpenType Schriften die entsprechende SWF-Datei<br />www.sifrgenerator.com/wizard2.html<br />
  100. 100. Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon<br />Pro<br />Gute Performance<br />Kommt ohne Flash aus (iPad, iPhone)<br />Text ist skalierbar<br />Grosse Auswahl an Schriften<br />Gute Optimierungsmöglichkeit beim Zusammenstellen der Zeichen<br />
  101. 101. Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon<br />Contra<br />Eingeschränkte Interaktivität<br />Beschränkung bei nicht lateinischen Alphabeten <br />Text lässt sich nicht kopieren<br />
  102. 102. Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon<br />Cufon Generator<br />Erstellt aus TrueType und OpenType Schriften die entsprechende Javascript-Datei<br />Untergruppen auch für Kyrillische und koptische Schriften möglich.<br />cufon.shoqolate.com/generate/<br />
  103. 103. Ausblick und TrendsSchrifteinbindung mit CSS (font-face)<br />«Web Font Fight Club»<br />(Teil 2)<br />
  104. 104. Ausblick und TrendsSchrifteinbindung mit CSS (font-face)<br />Einbinden von Zeichensätzen mittels @font-face. <br />www.zenelements.com/blog/css3-embed-font-face/<br />und<br />www.css3.info/preview/web-fonts-with-font-face/<br />
  105. 105. Ausblick und TrendsSchrifteinbindung mit CSS (font-face)<br />Pro<br />Einfach und unkompliziert<br />Kein Flash<br />Kein Javascript<br />Kompatible mit CSS Transformationen<br />Keine Beschränkung der Interaktivität<br />Unterstützt von allen aktuellen Browsern<br />
  106. 106. Ausblick und TrendsSchrifteinbindung mit CSS (font-face)<br />Contra<br />Datei wird bei umfangreichen Zeichensätze sehr gross ( >1MB)<br />Allerdings:<br />Lizenzproblem!!!<br />
  107. 107. Ausblick und TrendsLösung 1: Freiverfügbare Schriften<br />Quellen:<br />www.fontsquirrel.com<br />www.theleagueofmoveabletype.com<br />www.webfonts.info<br />www.dafont.com<br />www.cape-arcona.com/<br />www.abstractfonts.com<br />www.identifont.com/free-fonts.html<br />www.ingofonts.de/ingofonts/fonts/freefonts.html<br />www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/<br />
  108. 108. Ausblick und TrendsLösung 2: Web-Services für Schrifteinbindung<br />Pro<br />Schriftinformation ist codiert –> Rechtssicherheit <br />Daten sind komprimiert –> gute Performance<br />Schnelle und einfache Integration –> Unkompliziert<br />Contra<br />Serverausfall<br />Unterschiedliche Preismodelle (Abo oder Fixpreis)<br />keine Schriftenklassiker<br />
  109. 109. Ausblick und TrendsWeb-Services für Schrifteinbindung<br />Anbieter<br />Typekit – www.typekit.com<br />Typotheque – www.typotheque.com<br />Kernest – www.kernest.com<br />Fontdeck – www.fontdeck.com<br />
  110. 110. Ausblick und TrendsCSS 3 – Mehrspaltiger Text<br />«Die HTML 5.0»<br />
  111. 111. Ausblick und TrendsCSS 3 – Mehrspaltiger Text<br />Mehrspaltiger Text inkl. vertikaler Trennlininen und zusätzlichen Einstellungen für den Blocksatz (auto, inter-word, inter-ideograph, inter-cluster, distribute, kashida)<br />www.zenelements.com/blog/css3-multiple-columns/<br />
  112. 112. Ausblick und TrendsCSS 3 – Textschatten (text-shadow)<br />text-shadow: ApxBpxCpx #XXX;
- Apx = x-Achse
- Bpx = y-Achse
- Cpx = Weichzeichnen
- #XXX = HEX-Farbwert<br />www.westciv.com/tools/shadows/<br />
  113. 113. Ausblick und TrendsCSS 3 – Textschatten (text-shadow)<br />
  114. 114. Ausblick und TrendsCSS 3 – Textlinie<br />-webkit-text-stroke: Apx #XXX;<br />-webkit-text-fill-color: #XXX
- Apx = Strichstärke
- #XXX = HEX-Farbwert<br />www.westciv.com/tools/textStroke/<br />
  115. 115. Ausblick und TrendsCSS 3 Web-Kit – Showcase<br />www.tylergaw.com/lab/themanfromhollywood/<br />
  116. 116. Claus Medvesek. Senior AD UX.<br />14. April 2010. Design. Kantine. Web Typografie. Namics. <br />

×