Claus

Medvesek.
5. Juni 2009. Camp. Davos. Namics.

auch das ist Typografie!

Web Typografie
1. Was ist Typografie?
2. Tipps und Grundlagen
3. Ausblick wie gehts weiter?

Was ist Typografie?

Typographie ist: Auswhlen, Gliedern, Anordnen
und logisch Lesbarmachen von Schrift.
(Kurt Weidemann)

Was ist Typografie?

Typografie in Print

Was ist Typografie?

Typografie ist kontextabhngig

Autor / Absender

Art der InformaAon
Verwendungszweck
Absicht

Leser / Publikum

Umgebung
Persnliche SAmmung
Vorlieben / Interessen

Medium

Technologie
Format
Material

Was ist Typografie?

Typografie ist Sprache

Worte Stze
Stze Abstze
Abstze AbschniPe
AbschniPe Kapitel
Kapitel Dokument

Was ist Typografie?

Typografie ist Kommunikation

Autor

Hat die InformaAon

nach seinen
konzepAonellen
Modell strukturiert.

Designer

Leser

Verbindet beide
Modelle mit Hilfe
von etablierten
Regeln und
Erfahrung.

Hat ein eigenes

Modell um die
InformaAon zu
verarbeiten.

Was ist Typografie?

Typografie ist Struktur
Titel

SeitenAtel
KapitelAtel
HaupXtel
ZwischenAtel
Titel 4. Ordnung
Titel 5. Ordnung
Titel 6. Ordnung

<Atle>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Abstze & Listen

Normaler Absatz
Hervorhebung
Auszeichnung
Ausdruck
Code
Code-AbschniP
Variable
Zitat
Quelle
Liste
Auistung
DeniAonsliste

<p>
<strong>
<em>
<dfn>
<code>
<samp>
<var>
<blockquote>
<cite>
<ul>
<ol>
<dl><dt><dd>

Textauszeichnung

Bold / feP
Italic / kursiv
Big / Gross
Small / klein
Teletext
Hochgestellt
Tiefgestellt

<b>
<i>
<big>
<small>
<P>
<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 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

Gestaltungsraster
960 Grid

Fixe Breite von max. 960 Pixel

Zentriertes Layout
12er, 16er oder 24er Teilung
Flexibilitt in der Gestaltung und Anordnung der
Elemente

Tools
960 Gridder
Bookmarkelt zum
Einblenden von Rastern in
HTML-Seiten
Unterschiedliche
Einteilungen und
Grundlinienraster
Link:
http://gridder.andreehansson.se/

Tools
Blueprint Grid CSS Generator
Website zur Berechnung
verschiedener Abstnden
und Rasterteilung
Erzeugt auch eine
entsprechende CSS-Datei
Link:
http://kematzy.com/blueprint-generator/

Tools
Boks
Adobe Air Applikation zur
Berechnung von
beliebigen Rastern
Erzeugt auch eine
entsprechende CSS-Datei
Link:
http://toki-woki.net/p/Boks/

Gestaltungsraster
Beispiel

Grundlagen und Tipps

Grssen und Abstnde

Mut zur Lcke

Grssen und Abstnde

Schriftgrssen und Zeilenabstnde
Definition erfolgt in em
(Skalierbarkeit)
Angaben sind relativ zur
darberliegenden Ebene
Schriftgrssen beziehen sich
auf den Basefont im Body
Zeilenabstnde in Prozent
von der Schriftgrsse (1em =
100%)
Link:
http://riddle.pl/emcalc/

Grssen und Abstnde

Textbreite und Zeilenabstnde
10 bis 15 Worte je Zeile sind optimal
Zeilenabstand von 133-150% der Schriftgrsse ist ideal
Grssere Textbreite bedingt einen grsseren
Zeilenabstand

Grssen und Abstnde

PSD vs HTML/CSS

Einheit: Pixel oder em

PSD-Mockup -100 = -0.1em (CSS)

Grundlagen und Tipps

Spationierung

Yes, we kern

Spationierung
PSD vs HTML/CSS

Einheit: Pixel oder em

PSD-Mockup -100 = -0.1em (CSS)

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

Versalien
Headlines 2

Versalien
Headlines 3

Versalien
Headlines 4

Grundlagen und Tipps

Farbkontraste

Bei Nacht sind alle

Katzen grau

Farbkontraste
Grundlagen und WAI
Zu starke Kontraste sind
unangenehm zu lesen
Geringerer Kontrast fr
weniger wichtige
Informationen
WAI Standards
bercksichtigen

Tool
Color Contrast Analyzer

Foreground: #FFFFFF
Background: #0E2859
The contrast raAo 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 presentaAon of text
and images of text has a contrast raAo 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 presentaAon of text
and images of text has a contrast raAo of
at least 7:1 (Level AAA).

Link:
http://www.paciellogroup.com

Tool
Color Contrast Analyzer

Foreground: #A7A7A7
Background: #0E2859
The contrast raAo 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 presentaAon of text
and images of text has a contrast raAo 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 presentaAon of text
and images of text has a contrast raAo of
at least 7:1 (Level AAA).

Link:
http://www.paciellogroup.com

Tool
Color Contrast Analyzer

Foreground: #787878
Background: #0E2859
The contrast raAo 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 presentaAon of text
and images of text has a contrast raAo 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 presentaAon of text
and images of text has a contrast raAo of
at least 7:1 (Level AAA).

Link:
http://www.paciellogroup.com

Tool
Color Contrast Analyzer

Foreground: #6B6B6B
Background: #0E2859
The contrast raAo is: 2.7:1

Text failed at level AA
Large text failed at level AA
Guideline 1.4.3: Contrast (Minimum) -
WCAG 2 The visual presentaAon of text
and images of text has a contrast raAo 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 presentaAon of text
and images of text has a contrast raAo of
at least 7:1 (Level AAA).

Link:
http://www.paciellogroup.com

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

Grundlagen und Tipps

Unterstrichene Links

Think different

Grundlagen und Tipps

Unterstrichene Links

Problem:
Stehen zu dicht am Text
Haben die Farbe der Schrim

= Hsslich

Fakt:
Jeder kennt die FunkAon
sind von Nielsen geliebt

= Es funkAoniert

Unterstrichene Links
Die Lsung

a {text-decoration: none;
border-bottom: 1px }

Unterstrichene Links
Die Lsung

Unterstrichene Links
Die Lsung - gepunktet

Unterstrichene Links
Die Lsung - gestrichelt

Grundlagen und Tipps

Schriftarten

Es muss nicht
immer Arial sein

Schriftarten
Serif

Typische Vertreter

Georgia, Palatino, Times New

Roman, Hoefler Text, Baskerville,
Garamond, Constantia, Cochin, Big
Caslon

Anmutung

Seris, ernst, erzhlend, lyrisch,

emotional

Geeignet fr

Fliesstexte, Headlines, Zitat

Schriftarten
Sans-Serif

Typische Vertreter

Arial, Helvetica, Calibri, Corbel,

Segoe, Gill Sans, Lucida Grande,
Geneva, Verdana, Tahoma,
Trebuchet,

Anmutung

Neutral, sachlich, objektiv,

funktional, logisch,

Geeignet fr

Fliesstexte, Headlines, Legenden,

Fussnoten, Aktionselemente

Schriftarten
Monospace

Typische Vertreter

Andale Mono, Consolas, Courier,

Courier New, Monaco, Bitstream
Vera Sans Mono

Anmutung

Technisch, mechanisch,
monoton, statisch

Geeignet fr

Code-Texte, Ziffern

Schriftarten
Decorative

Typische Vertreter

Comic Sans, Chalkboard, Impact,

Marker Felt, Papyrus, Skia,
Zapfino,

Anmutung

Verspielt, sehr emotional,

bertrieben

Geeignet fr

Headlines, Eye-Catcher,
Conversion

Tools
flippingtypical.com

Tools
Typetester

Link:
hPp://www.typetester.org/

Tool
csstypeset

Link:
hPp://csstypeset.com/

Grundlagen und Tipps

Fontstacks

One Font doesnt fit all

Problem:
Je nach Betriebssystem
und Somware sind
verschiedene Schrimen
installiert.

Lsung:
Es werden mehrere
Schrimen im CSS
deniert.

Grundlagen und Tipps

Nathan Fords Better Font Stacks

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

Tool
Font Stack Builder
1. Ideal
2. AlternaAve
3. Verbreitet
4. Generisch

Link:
hPp://www.codestyle.org/servlets/FontStack

Grundlagen und Tipps

sIFR

One more link

Grundlagen und Tipps

sIFR scalable Inman Flash Replacement

CSS + Flash + Javascript

Link:
hPp://wiki.novemberborn.net

sIFR
Vorteile
Nahezu alle Schriftarten knnen verwendet werden
Verletzt nicht das Copyright
Vorteil gegenber Bildern bei Suchmaschinen und
Barrierefreiheit
Text ist skalierbar
Text kann selektiert und kopiert werden

sIFR
Nachteile
Performanceproblem bei mehr als zehn Elementen pro
Seite
Keine Untersttzung von mobilen Endgerten (noch)
Beschrnkung bei nicht lateinischen Alphabeten
Druckfunktion wird nicht untersttzt
Transparente Hintergrnde werden bei IE6 nicht
untersttzt

Tool
sIFR Generator
Erstellt aus Truetype und
Opentype Schriften die
entsprechende SWF-Datei

Link:
hPp://www.sifrgenerator.com/wizard2.html

Tool
sifrvault.com
bersicht von frei
verfgbaren Schriften

Link:
hPp://www.sifrvault.com

... wird fortgesetzt.

http://know.namics.com/display/buildrun/Web
+Typografie

Web Typografie
Best Practices und Flickr Gallery
URLs und Flickr Gallery nach
Themen:

Corporate (typo_corporate)
Blog/Magazine (typo_blog)
Emotional (typo_emotion)
Funktional (typo_function)
Formular (typo_forms)
Headlines (typo_headline)
Text (typo_text)

Und als Tag immer auch:

namics_typo

Web Typografie
Externe Quellen zu Web Typography
Tools
Blogs
Technologien und Trends
sIFR (scalable Inman
Flash Replacement)

Claus Medvesek.
5. Juni 2009. Camp. Davos. Namics.