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

Transkript

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

2 auch das ist Typografie!

3 Web Typografie 1. Was ist Typografie? 2. Tipps und Grundlagen 3. 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

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

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

17 Was ist Typografie? Typografie ist Kommunikation Autor Strukturiert die Informationen nach seinem eigenen mentalen Modell 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 Absätze & Listen Textauszeichnung Seitentitel tit <title> Kapiteltitel <h1> Haupttitel <h2> Zwischentitel <h3> Titel 4. Ordnung <h4> Titel 5. Ordnung <h5> Titel 6. Ordnung <h6> Normaler Absatz<p> Ausdruck <dfn> Code <code> Code-Abschnitt <samp> Variable <var> Zitat <blockquote> Quelle <cite> Liste <ul> Auflistung <ol> Definitionsliste <dl><dt><dd> Hervorhebung Betonung Bold / fett Italic / kursiv Big / Gross Small / klein Teletext Hochgestellt Tiefgestellt <strong> <em> <b> <i> <big> <small> <tt> <sup> <sub>

19 Was ist Typografie? Typografie ist das Web «Typography is not on the Web, it IS the Web» Mark Boulton, FOWD London 2009

20 Was ist Typografie? Typografie im Web

31 Was ist Typografie? Typografie ist Benutzererlebnis «Good typography improves user experience»

32 Grundlagen und Tipps

33 Grundlagen und Tipps Gestaltungsraster «Auch Text braucht Luft zum Atmen»

34 Gestaltungsraster 960 Grid - 24er Raster

35 Gestaltungsraster 960 Grid - 12er Raster Fixe Breite von max. 960 Pixel Zentriertes Layout 12er, 16er oder 24er Teilung Flexibilität in der Gestaltung und Anordnung der Elemente

36 Tools Blueprint Grid CSS Generator Website zur Berechnung verschiedener Abständen und Rasterteilung. Erzeugt auch eine entsprechende CSS-Datei bgg.kematzy.com/

37 Tools Boks Adobe Air Applikation zur Berechnung von beliebigen Rastern Inkl. CSS-Datei t/ /B k /

38 Gestaltungsraster Beispiel

39 Gestaltungsraster Beispiel

40 Grundlagen und Tipps Grössen und Abstände «Mut zur Lücke»

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

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

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

44 Grundlagen und Tipps Spationierung «Yes, we kern»

45 Versalien Headlines

46 Spationierung PSD vs HTML/CSS Einheit: Pixel oder em PSD-Mockup 100 = 0.1em (CSS)

47 Grundlagen und Tipps Versalien «The Next BIG Thing»

48 Versalien Headlines

49 Versalien Kategorieüberschriften

50 Grundlagen und Tipps Farbkontraste «Bei Nacht sind alle Katzen grau»

51 Farbkontraste Grundlagen und WAI Zu starke Kontraste sind unangenehm Schriftglättung (Anti-Alias) Ali )b bei hohen Kontrasten ist problematisch Kontraste können Inhalte strukturieren WAI Standards sind zu berücksichtigen

52 Tool Color Contrast Analyzer Foreground: #FFFFFF Background: #0E2859 The contrast ratio is: 14.1:1 Text passed at level AA Large text passed at level AA Guideline 1.4.3: Contrast (Minimum) - WCAG 2 The visual presentation of text t and images of text has a contrast ratio of at least 4.5:1 (Level AA). Text passed at level AAA Large text passed at level AAA Guideline 1.4.6: Contrast (Enhanced) - WCAG 2 The visual presentation of text and images of text has a contrast ratio of at least 7:1 (Level AAA).

53 Tool Color Contrast Analyzer Foreground: #A7A7A7 Background: #0E2859 The contrast ratio is: 6.0:1 Text passed at level AA Large text passed at level AA Guideline 1.4.3: Contrast (Minimum) - WCAG 2 The visual presentation of text t and images of text has a contrast ratio of at least 4.5:1 (Level AA). Text failed at level AAA Large text passed at level AAA Guideline 1.4.6: Contrast (Enhanced) - WCAG 2 The visual presentation of text and images of text has a contrast ratio of at least 7:1 (Level AAA).

54 Tool Color Contrast Analyzer Foreground: # Background: #0E2859 The contrast ratio is: 3.2:1 Text failed at level AA Large text passed at level AA Guideline 1.4.3: Contrast (Minimum) - WCAG 2 The visual presentation of text t and images of text has a contrast ratio of at least 4.5:1 (Level AA). Text failed at level AAA Large text failed at level AAA Guideline 1.4.6: Contrast (Enhanced) - WCAG 2 The visual presentation of text and images of text has a contrast ratio of at least 7:1 (Level AAA).

55 Farbkontraste Vordergrund / Hintergrund Kontrastverbesserung bei Mouseover / Focus Abgrenzung zur Umgebung

56 Grundlagen und Tipps Unterstrichene Links «Think different»

57 Grundlagen und Tipps Unterstrichene Links Problem Steht zu dicht am Text Hat die Farbe der Schrift Fakt Jeder erkennt die Funktion Wird von Nielsen empfohlen = Hässlich = Es funktioniert

58 Unterstrichene Links Die Lösung a {text-decoration: none; border-bottom: 1px }

59 Unterstrichene Links Die Lösung mehr Abstand

60 Unterstrichene Links Die Lösung - gepunktet

61 Unterstrichene Links Die Lösung - gestrichelt

62 Grundlagen und Tipps Schriftarten «Es muss nicht immer Arial sein»

63 Schriftarten Tonalität

68 Schriftarten Serif Typische Vertreter Georgia, Palatino, Times New Roman, Hoefler Text, Baskerville, Garamond, Constantia, Cochin, Big Caslon Anmutung Seriös, ernst, erzählend, lyrisch, emotional Geeignet für Fliesstexte, Headlines, Zitat

69 Schriftarten Sans-SerifSerif Typische Vertreter Arial, Helvetica, Calibri, Corbel, Segoe, Gill Sans, Lucida Grande, Geneva, Verdana, Th Tahoma, Trebuchet, Anmutung Neutral, sachlich, h objektiv, funktional, logisch, Geeignet für Fliesstexte, Headlines, Legenden, Fussnoten, Aktionselemente

70 Schriftarten Monospace Typische Vertreter Anmutung Geeignet für Andale Mono, Consolas, Courier, Courier New, Monaco, Bitstream Vera Sans Mono Technisch, mechanisch, monoton, statisch ti Code-Texte, Ziffern

71 Schriftarten Cursive Typische Vertreter Anmutung Geeignet für Edwardian Script ITC, Apple Chancery, Zapfino, Papyrus Feierlich, emotional, festlich, antik Headlines, Eye-Catcher, Titel

72 Schriftarten Decorative Typische Vertreter Anmutung Geeignet für Comic Sans, Chalkboard, Impact, Marker Felt, Skia, Verspielt, sehr emotional, übertrieben Headlines, Eye-Catcher, Conversion

73 Tools flippingtypical.comcom

74 Tools Typetester

75 Tool csstypeset

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

77 Grundlagen und Tipps Nathan Ford s Better Font Stacks

78 Grundlagen und Tipps Nathan Ford s Better Font Stacks Ideal 2. Alternative 3. Verbreitet t 4. Generisch Weitere Beispiele:

79 Grundlagen und Tipps Fallstricken Zu beachten sind: Laufweite Sonderzeichen Zeichensätze

80 Tool Web-safe Fonts

81 Tool Font Stack Builder

82 Ausblick und Trends

83 Ausblick und Trends Schriftenenbindung mit Javascript «Web Font Fight Club» (Teil 1)

84 Ausblick und Trends Schriftenenbindung mit Javascript sifr Cufon Facelift (FLIR) Technologie JS, CSS, Flash JS, CSS, VSA, JS, CSS, PHP, JS, CSS, SVG & (Bilder) Canvas Selektierbar Ja Teilweise Nein skalierbar Ja Ja Ja Druck Ja, mit Print CSS Ja Ja Interaktivität beschränkt beschränkt beschränkt Link wiki.novemberborn.net/sifr/ wiki.github.com/sorccu/cufon / flir.mawhorter.net/

85 Ausblick und Trends Schriftenenbindung mit Javascript sifr Pro OpenType- und TrueType- Schriften sind geeignet Vorteil gegenüber Bildern bei Suchmaschinen und Barrierefreiheit Text ist skalierbar Text kann selektiert t und kopiert werden

86 Ausblick und Trends Schriftenenbindung 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

87 Ausblick und Trends Schriftenenbindung mit Javascript sifr sifr Generator Erstellt aus TrueType und OpenType Schriften die entsprechende SWF-Datei

88 Ausblick und Trends Schriftenenbindung 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

89 Ausblick und Trends Schriftenenbindung mit Javascript Cufon Contra Eingeschränkte Interaktivität Beschränkung bei nicht lateinischen Alphabeten Text lässt sich nicht kopieren

90 Ausblick und Trends Schriftenenbindung 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/ com/generate/

91 Ausblick und Trends Schrifteinbindung mit CSS (font-face) face) «Web Font Fight Club» (Teil 2)

92 Ausblick und Trends Schrifteinbindung mit CSS (font-face) face) Einbinden von Zeichensätzen und

93 Ausblick und Trends Schrifteinbindung mit CSS (font-face) 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

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

95 Ausblick und Trends Lösung 1: Freiverfügbare Schriften Quellen:

96 Ausblick und Trends Lö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

97 Ausblick und Trends Web-Services für Schrifteinbindung Anbieter Typekit Typotheque Kernest Fontdeck com

98 Ausblick und Trends CSS 3 Mehrspaltiger Text «Die HTML 5.0»

99 Ausblick und Trends CSS 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)

100 Ausblick und Trends CSS 3 Textschatten (text-shadow) text-shadow: Apx Bpx Cpx #XXX; - Apx = x-achse - Bpx= y- Achse - Cpx = Weichzeichnen - #XXX = HEX-Farbwert

101 Ausblick und Trends CSS 3 Textschatten (text-shadow)

102 Ausblick und Trends CSS 3 Textlinie -webkit-text-stroke: Apx #XXX; -webkit-text-fill-color: #XXX -Apx = Strichstärke tä - #XXX = HEX- Farbwert

103 Ausblick und Trends CSS 3 Web-Kit Showcase

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