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

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

auch das ist Typografie!

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

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

Was ist Typografie? Typografie in Print

Was ist Typografie? Typografie in Print

Was ist Typografie? Typografie in Print

Was ist Typografie? Typografie in Print

Was ist Typografie? Typografie in Print

Was ist Typografie? Typografie in Print

Was ist Typografie? Typografie in Print

Was ist Typografie? Typografie in Print

Was ist Typografie? Typografie in Print

Was ist Typografie? Typografie in Print

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

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

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

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>

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

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

Was ist Typografie? Typografie im Web

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

Grundlagen und Tipps

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

Gestaltungsraster 960 Grid - 24er Raster

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

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

Tools Boks Adobe Air Applikation zur Berechnung von beliebigen Rastern Inkl. CSS-Datei www.toki-woki.net/p/boks/ t/ /B k /

Gestaltungsraster Beispiel

Gestaltungsraster Beispiel

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

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

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

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

Grundlagen und Tipps Spationierung «Yes, we kern»

Versalien Headlines www.prospermag.com/article/284-162 www.akzonobel.com/corporate_governance/supervisory_board/

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

Grundlagen und Tipps Versalien «The Next BIG Thing»

Versalien Headlines www.tputh.com/

Versalien Kategorieüberschriften www.virgin.com/richard-branson/blog/ www.typenuts.com/

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

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

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). www.paciellogroup.com

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). www.paciellogroup.com

Tool Color Contrast Analyzer Foreground: #787878 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). www.paciellogroup.com

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

Grundlagen und Tipps Unterstrichene Links «Think different»

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

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

Unterstrichene Links Die Lösung mehr Abstand

Unterstrichene Links Die Lösung - gepunktet

Unterstrichene Links Die Lösung - gestrichelt

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

Schriftarten Tonalität

Schriftarten Tonalität

Schriftarten Tonalität

Schriftarten Tonalität

Schriftarten Tonalität

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

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

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

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

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

Tools flippingtypical.comcom

Tools Typetester www.typetester.org/

Tool csstypeset http://csstypeset.com/

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.

Grundlagen und Tipps Nathan Ford s Better Font Stacks

Grundlagen und Tipps Nathan Ford s Better Font Stacks 1 2 3 4 1. Ideal 2. Alternative 3. Verbreitet t 4. Generisch Weitere Beispiele: www.inspirationbit.com/striking-web-sites-with-fontstacks-that-inspire/

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

Tool Web-safe Fonts www.speaking-in-styles.com/web-typography/web-safe-fonts/

Tool Font Stack Builder www.codestyle.org/servlets/fontstack

Ausblick und Trends

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

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/

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

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

Ausblick und Trends Schriftenenbindung mit Javascript sifr sifr Generator Erstellt aus TrueType und OpenType Schriften die entsprechende SWF-Datei www.sifrgenerator.com/wizard2.html

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

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

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/

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

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

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

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

Ausblick und Trends Lö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-forprofessional-design/

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

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

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

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) www.zenelements.com/blog/css3-multiplecolumns/

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 www.westciv.com/tools/shadows/

Ausblick und Trends CSS 3 Textschatten (text-shadow)

Ausblick und Trends CSS 3 Textlinie -webkit-text-stroke: Apx #XXX; -webkit-text-fill-color: #XXX -Apx = Strichstärke tä - #XXX = HEX- Farbwert www.westciv.com/tools/textstroke/

Ausblick und Trends CSS 3 Web-Kit Showcase www.tylergaw.com/lab/themanfromhollywood/

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