Post on 28-Jan-2015
description
…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»
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
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.