Your SlideShare is downloading. ×
Design. Kantine. Web Typography. Namics.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design. Kantine. Web Typography. Namics.

3,490

Published on

Antipasti …

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

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,490
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
29
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 35. Gestaltungsraster960 Grid - 12er Raster
    • Fixe Breite von max. 960 Pixel
    • 36. Zentriertes Layout
    • 37. 12er, 16er oder 24er Teilung
    • 38. Flexibilität in der Gestaltung und Anordnung der Elemente
  • ToolsBlueprint Grid CSS Generator
    Website zur Berechnung verschiedener Abständen und Rasterteilung.
    Erzeugt auch eine entsprechende CSS-Datei
    bgg.kematzy.com/
    www.blueprintcss.org/
  • 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
  • 54. ToolColor ContrastAnalyzer
    Foreground: #FFFFFF
    Background: #0E2859
    Thecontrastratiois: 14.1:1
    • Text passed at level AA
    • 55. Large text passed at level AA
    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).
    • Text passed at level AAA
    • 56. Large text passed at level AAA
    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).
    www.paciellogroup.com
  • 57. ToolColor ContrastAnalyzer
    Foreground: #A7A7A7
    Background: #0E2859
    Thecontrastratiois: 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 ContrastAnalyzer
    Foreground: #787878
    Background: #0E2859
    Thecontrastratiois: 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 / Hintergrund
    Kontrastverbesserung bei Mouseover / Focus
    Abgrenzung zur Umgebung
  • 66. Grundlagen und TippsUnterstrichene Links
    «Think different»
  • 67. Grundlagen und TippsUnterstrichene Links
    Problem
    • Steht zu dicht am Text
    • 68. Hat die Farbe der Schrift
    = Hässlich
    Fakt
    • 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 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.

×