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

…auch das ist Typografie!

Web Typografie1. Was ist Typografie?2. Tipps und Grundlagen3. 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

Medium

Technologie

Format

Material

Leser / Publikum

Umgebung

Persönliche Stimmung

Vorlieben / Interessen

Autor / Absender

Art der Information

Verwendungszweck

Absicht

Was ist Typografie?Typografie ist Sprache

Worte

Sätze

Absätze

Abschnitte

Kapitel

Dokument

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

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>…

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 TippsGestaltungsraster

«Auch Text braucht Luft zum Atmen»

Gestaltungsraster960 Grid - 24er Raster

Gestaltungsraster960 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

ToolsBlueprint Grid CSS Generator

Website zur Berechnung verschiedener Abständen und Rasterteilung.Erzeugt auch eine entsprechende CSS-Datei

bgg.kematzy.com/www.blueprintcss.org/

ToolsBoks

Adobe Air Applikation zur Berechnung von beliebigen Rastern

Inkl. CSS-Datei

www.toki-woki.net/p/Boks/

GestaltungsrasterBeispiel

Grundlagen und TippsGrössen und Abstände

«Mut zur Lücke»

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

Grössen und AbständeAbsatzformatierung – Abstand nach einem Absatz

p { margin-bottom:1.25em }

Abstand = min. 2/3 der Zeilenhöhe

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

Grundlagen und TippsSpationierung

«Yes, we kern»

VersalienHeadlines

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

SpationierungPSD vs HTML/CSS

Einheit: Pixel oder em PSD-Mockup 100 = 0.1em (CSS)

Grundlagen und TippsVersalien

«The Next BIG Thing»

VersalienHeadlines

www.tputh.com/

VersalienKategorieüberschriften

www.virgin.com/richard-branson/blog/

www.typenuts.com/

Grundlagen und TippsFarbkontraste

«Bei Nacht sind alle Katzen grau»

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

ToolColor Contrast Analyzer

Foreground: #FFFFFF Background: #0E2859The 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 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

ToolColor Contrast Analyzer

Foreground: #A7A7A7 Background: #0E2859The 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 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

ToolColor Contrast Analyzer

Foreground: #787878 Background: #0E2859The 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 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

FarbkontrasteVordergrund / Hintergrund

Kontrastverbesserung bei Mouseover / Focus

Abgrenzung zur Umgebung

Grundlagen und TippsUnterstrichene Links

«Think different»

Grundlagen und TippsUnterstrichene Links

Problem

• Steht zu dicht am Text• Hat die Farbe der Schrift

= Hässlich

Fakt

• Jeder erkennt die Funktion• Wird von Nielsen empfohlen

= Es funktioniert

Unterstrichene LinksDie Lösung

a {text-decoration: none;

border-bottom: 1px }

Unterstrichene LinksDie Lösung – mehr Abstand

Unterstrichene LinksDie Lösung - gepunktet

Unterstrichene LinksDie Lösung - gestrichelt

Grundlagen und TippsSchriftarten

«Es muss nicht immer Arial

sein»

I love You

SchriftartenTonalität

I love You

SchriftartenTonalität

I love You

SchriftartenTonalität

I kill You

SchriftartenTonalität

I kill You

SchriftartenTonalität

SchriftartenSerif

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

SchriftartenSans-Serif

Typische Vertreter

Arial, Helvetica, Calibri, Corbel, Segoe, Gill Sans, Lucida Grande, Geneva, Verdana, Tahoma, Trebuchet,

Anmutung Neutral, sachlich, objektiv, funktional, logisch,

Geeignet für Fliesstexte, Headlines, Legenden, Fussnoten, Aktionselemente

SchriftartenMonospace

Typische Vertreter Andale Mono, Consolas, Courier, Courier New, Monaco, Bitstream Vera Sans Mono

Anmutung Technisch, mechanisch, monoton, statisch

Geeignet für Code-Texte, Ziffern

SchriftartenCursive

Typische Vertreter Edwardian Script ITC, Apple Chancery, Zapfino, Papyrus

Anmutung Feierlich, emotional, festlich, antik

Geeignet für Headlines, Eye-Catcher, Titel

SchriftartenDecorative

Typische Vertreter Comic Sans, Chalkboard, Impact, Marker Felt, Skia,

Anmutung Verspielt, sehr emotional, übertrieben

Geeignet für Headlines, Eye-Catcher, Conversion

Toolsflippingtypical.com

ToolsTypetester

www.typetester.org/

Toolcsstypeset

http://csstypeset.com/

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.

Grundlagen und TippsNathan Ford‘s Better Font Stacks

Grundlagen und TippsNathan Ford‘s Better Font Stacks

1. Ideal2. Alternative3. Verbreitet4. Generisch

Weitere Beispiele: www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/

1 2 3 4

Grundlagen und TippsFallstricken

Zu beachten sind:LaufweiteSonderzeichenZeichensätze

ToolWeb-safe Fonts

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

ToolFont Stack Builder

www.codestyle.org/servlets/FontStack

Ausblick und Trends

Ausblick und TrendsSchriftenenbindung mit Javascript

«Web Font Fight Club»

(Teil 1)

Ausblick und TrendsSchriftenenbindung mit Javascript

sIFR Cufon Facelift (FLIR)

Technologie JS, CSS, Flash JS, CSS, VSA, JS, CSS, SVG & Canvas

JS, CSS, PHP, (Bilder)

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 TrendsSchriftenenbindung mit Javascript – sIFR

Pro OpenType- und TrueType-

Schriften sind geeignet Vorteil gegenüber Bildern

bei Suchmaschinen und Barrierefreiheit

Text ist skalierbar Text kann selektiert und

kopiert werden

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

Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR

sIFR GeneratorErstellt aus TrueType und OpenType Schriften die entsprechende SWF-Datei

www.sifrgenerator.com/wizard2.html

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

Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon

Contra Eingeschränkte Interaktivität Beschränkung bei nicht

lateinischen Alphabeten Text lässt sich nicht kopieren

Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon

Cufon GeneratorErstellt aus TrueType und OpenType Schriften die entsprechende Javascript-DateiUntergruppen auch für Kyrillische und koptische Schriften möglich.

cufon.shoqolate.com/generate/

Ausblick und TrendsSchrifteinbindung mit CSS (font-face)

«Web Font Fight Club»

(Teil 2)

Ausblick und TrendsSchrifteinbindung mit CSS (font-face)

Einbinden von Zeichensätzen mittels @font-face.

www.zenelements.com/blog/css3-embed-font-face/undwww.css3.info/preview/web-fonts-with-font-face/

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

Ausblick und TrendsSchrifteinbindung mit CSS (font-face)

Contra Datei wird bei

umfangreichen Zeichensätze sehr gross ( >1MB)

Allerdings:Lizenzproblem!!!

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-freef

onts-for-professional-design/

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

Ausblick und TrendsWeb-Services für Schrifteinbindung

AnbieterTypekit – www.typekit.comTypotheque – www.typotheque.comKernest – www.kernest.comFontdeck – www.fontdeck.com

Ausblick und TrendsCSS 3 – Mehrspaltiger Text

«Die HTML 5.0»

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/

Ausblick und TrendsCSS 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 TrendsCSS 3 – Textschatten (text-shadow)

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/

Ausblick und TrendsCSS 3 Web-Kit – Showcase

www.tylergaw.com/lab/themanfromhollywood/

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