Design. Kantine. Web Typography. Namics.

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

…auch das ist Typografie!

Web Typografie
Was ist Typografie?
Tipps und Grundlagen
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 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>
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
«Typographyisnot on the Web, it IS the Web»
Mark Boulton, FOWD London 2009

Was ist Typografie?Typografie im Web

Was ist Typografie?Typografie ist Benutzererlebnis
«Good typographyimprovesuserexperience»

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, wekern»

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

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

Grundlagen und TippsVersalien
«TheNext 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 ContrastAnalyzer
Foreground: #FFFFFF
Background: #0E2859
Thecontrastratiois: 14.1:1
Text passed at level AA
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
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

Foreground: #A7A7A7
Background: #0E2859
Text passed at level AA
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).
Text failed at level AAA
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).

Foreground: #787878
Background: #0E2859
Text failed at level AA
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).
Text failed at level AAA
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).

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 loveYou
SchriftartenTonalität

I kill You
SchriftartenTonalität

SchriftartenSerif

SchriftartenSans-Serif

SchriftartenMonospace

SchriftartenCursive

SchriftartenDecorative

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‘sBetter Font Stacks

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/

Grundlagen und TippsFallstricken
Zu beachten sind:
Laufweite
Sonderzeichen
Zeichensätze

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

ToolFont StackBuilder
www.codestyle.org/servlets/FontStack

Ausblick und Trends

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

Ausblick und TrendsSchriftenenbindung mit Javascript

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

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

sIFR Generator
Erstellt 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

Contra
Eingeschränkte Interaktivität
Beschränkung bei nicht lateinischen Alphabeten
Text lässt sich nicht kopieren

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/

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

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/

Pro
Einfach und unkompliziert
Kein Flash
Kein Javascript
Kompatible mit CSS Transformationen
Keine Beschränkung der Interaktivität
Unterstützt von allen aktuellen Browsern

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-freefonts-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
Anbieter
Typekit – www.typekit.com
Typotheque – www.typotheque.com
Kernest – www.kernest.com
Fontdeck – 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: ApxBpxCpx #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.

http://blog.namics.com	335
http://www.macgamper.com	81
http://www.slideshare.net	6
http://web.archive.org	4
http://static.slidesharecdn.com	3
http://193.135.58.42	3
http://webcache.googleusercontent.com	2
http://myfever.info	1
http://www.int.galaxy.ch	1

Design. Kantine. Web Typography. Namics.

by Claus Medvesek on Apr 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 436

Statistics

Design. Kantine. Web Typography. Namics. — Presentation Transcript