Sie sind auf Seite 1von 67
Claus Medvesek. 5. Juni 2009. Camp. Davos. Namics.

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 geht‘s weiter?

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

Autor / Absender Art der InformaAon V erwendungszweck Absicht
Autor / Absender
Art der InformaAon
V erwendungszweck
Absicht
Leser / Publikum Medium Umgebung Persönliche SAmmung Vorlieben / Interessen Technologie Format Material
Leser / Publikum
Medium
Umgebung
Persönliche SAmmung
Vorlieben / Interessen
Technologie
Format
Material

Was ist Typografie? Typografie ist Sprache

Worte è Sätze Sätze è Absätze Absätze è AbschniPe AbschniPe è Kapitel Kapitel è Dokument
Worte è Sätze
Sätze è Absätze
Absätze è AbschniPe
AbschniPe è Kapitel
Kapitel è Dokument

Was ist Typografie? Typografie ist Kommunikation

Autor Designer Leser Hat die InformaAon nach seinen konzepAonellen Modell strukturiert. Verbindet beide Modelle
Autor
Designer
Leser
Hat die InformaAon
nach seinen
konzepAonellen
Modell strukturiert.
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 <Atle> KapitelAtel HaupXtel ZwischenAtel Titel 4. Ordnung Titel 5. Ordnung Titel 6.
Titel
SeitenAtel <Atle>
KapitelAtel
HaupXtel
ZwischenAtel
Titel 4. Ordnung
Titel 5. Ordnung
Titel 6. Ordnung
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Absätze & Listen Textauszeichnung Normaler Absatz <p> Hervorhebung < strong> Auszeichnung
Absätze & Listen
Textauszeichnung
Normaler Absatz <p>
Hervorhebung
<
strong>
Auszeichnung
<
em>
Bold / feP
Italic / kursiv
Big / Gross
Small / klein
Teletext
Hochgestellt
Tiefgestellt
<
<b>
<i>
big>
small >
P >
sup
< sub >
<
Ausdruck
<
dfn >
Code
<
code>
<
Code-AbschniP < samp >
<
>
Variable
<
var>
Zitat
<
blockquote>
Quelle
<
cite>
Liste
<
ul >
Auflistung
<
ol >
DefiniAonsliste < dl><dt><dd >

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 Flexibilität 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/

in HTML-Seiten •   U nterschiedliche Einteilungen und Grundlinienraster Li nk : http://gridder.andreehansson.se /
in HTML-Seiten •   U nterschiedliche Einteilungen und Grundlinienraster Li nk : http://gridder.andreehansson.se /

Tools Blueprint Grid CSS Generator

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

Link:

http://kematzy.com/blueprint-generator/

und Rasterteilung •   Erzeugt auch eine entsprechende CSS-Datei Li nk : http://kematzy.com/blueprint-generator /
und Rasterteilung •   Erzeugt auch eine entsprechende CSS-Datei Li nk : 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/

von beliebigen Rastern •   Erzeugt auch eine entsprechende CSS-Datei Li nk : http://toki-woki.net/p/Boks/
von beliebigen Rastern •   Erzeugt auch eine entsprechende CSS-Datei Li nk : http://toki-woki.net/p/Boks/

Gestaltungsraster

Beispiel

Grundlagen und Tipps Grössen und Abstände

«Mut zur Lücke»

Grössen und Abstände Schriftgrössen und Zeilenabstände

Definition erfolgt in em (Skalierbarkeit) Angaben sind relativ zur darüberliegenden Ebene Schriftgrössen beziehen sich auf den Basefont im Body Zeilenabstände in Prozent von der Schriftgrösse (1em =

100%)

Link:

http://riddle.pl/emcalc/

im Body •   Zeilenabstände in Prozent von der Schriftgrösse (1em = 100%) Link: http://riddle.pl/emcalc /
im Body •   Zeilenabstände in Prozent von der Schriftgrösse (1em = 100%) Link: http://riddle.pl/emcalc /

Grössen und Abstände Textbreite 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ände PSD vs HTML/CSS

Grössen und Abstände PSD vs HTML/CSS   •   • Einheit: Pixel oder em PSD-Mockup -100

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

Grundlagen und Tipps Spationierung

«Yes, we kern»

Spationierung PSD vs HTML/CSS

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

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

Spationierung PSD vs HTML/CSS

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

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

Grundlagen und Tipps Versalien

«The Next BIG Thing»

Versalien

Headlines

Versalien Headlines
Versalien Headlines

Versalien Headlines 2

Versalien Headlines 2
Versalien Headlines 2

Versalien Headlines 3

Versalien Headlines 3
Versalien Headlines 3

Versalien Headlines 4

Versalien Headlines 4
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 für weniger wichtige Informationen WAI Standards berücksichtigen

zu lesen •   Geringerer Kontrast für weniger wichtige Informationen •   WAI Standards berücksichtigen
zu lesen •   Geringerer Kontrast für weniger wichtige Informationen •   WAI Standards berücksichtigen

Tool Color Contrast Analyzer

Tool Color Contrast Analyzer Foreground : #FFFFFF Background: #0E2859 The contrast raAo is : 14.1:1 •

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).

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

Tool Color Contrast Analyzer Foreground : #A7A7A7 Background: #0E2859 The contrast raAo is : 6.0:1 •

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).

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

Tool Color Contrast Analyzer Foreground : #787878 Background: #0E2859 The contrast raAo is : 3.2:1 •

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).

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

Tool Color Contrast Analyzer Foreground : #6B6B6B Background: #0E2859 The contrast raAo is : 2.7:1 •

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).

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

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

Grundlagen und Tipps Unterstrichene Links

«Think different»

Grundlagen und Tipps Unterstrichene Links

Problem: Fakt: •   Stehen zu dicht am Text •   Jeder kennt die FunkAon
Problem:
Fakt:
•   Stehen zu dicht am Text
•   Jeder kennt die FunkAon
•   Haben die Farbe der Schrim
•   sind von Nielsen geliebt
= Hässlich
= Es funkAoniert

Unterstrichene Links Die Lösung

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

Unterstrichene Links Die Lösung

Unterstrichene Links Die Lösung
Unterstrichene Links Die Lösung
Unterstrichene Links Die Lösung

Unterstrichene Links Die Lösung - gepunktet

Unterstrichene Links Die Lösung - gepunktet
Unterstrichene Links Die Lösung - gepunktet
Unterstrichene Links Die Lösung - gepunktet

Unterstrichene Links Die Lösung - gestrichelt

Unterstrichene Links Die Lösung - gestrichelt
Unterstrichene Links Die Lösung - gestrichelt
Unterstrichene Links Die Lösung - gestrichelt

Grundlagen und Tipps Schriftarten

«Es muss nicht immer Arial sein»

Schriftarten

Serif

Schriftarten Serif Typische Vertreter Georgia, Palatino , Times New Roman, Hoefler Text, Baskerville , Garamond ,
Schriftarten Serif Typische Vertreter Georgia, Palatino , Times New Roman, Hoefler Text, Baskerville , Garamond ,
Schriftarten Serif Typische Vertreter Georgia, Palatino , Times New Roman, Hoefler Text, Baskerville , Garamond ,
Schriftarten Serif Typische Vertreter Georgia, Palatino , Times New Roman, Hoefler Text, Baskerville , Garamond ,
Schriftarten Serif Typische Vertreter Georgia, Palatino , Times New Roman, Hoefler Text, Baskerville , Garamond ,
Schriftarten Serif Typische Vertreter Georgia, Palatino , Times New Roman, Hoefler Text, Baskerville , Garamond ,
Schriftarten Serif Typische Vertreter Georgia, Palatino , Times New Roman, Hoefler Text, Baskerville , Garamond ,
Schriftarten Serif Typische Vertreter Georgia, Palatino , Times New Roman, Hoefler Text, Baskerville , Garamond ,

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

Schriftarten Sans-Serif Typische Vertreter Arial, Helvetica , Calibri , Corbel , Segoe , Gill Sans ,
Schriftarten Sans-Serif Typische Vertreter Arial, Helvetica , Calibri , Corbel , Segoe , Gill Sans ,
Schriftarten Sans-Serif Typische Vertreter Arial, Helvetica , Calibri , Corbel , Segoe , Gill Sans ,
Schriftarten Sans-Serif Typische Vertreter Arial, Helvetica , Calibri , Corbel , Segoe , Gill Sans ,
Schriftarten Sans-Serif Typische Vertreter Arial, Helvetica , Calibri , Corbel , Segoe , Gill Sans ,
Schriftarten Sans-Serif Typische Vertreter Arial, Helvetica , Calibri , Corbel , Segoe , Gill Sans ,
Schriftarten Sans-Serif Typische Vertreter Arial, Helvetica , Calibri , Corbel , Segoe , Gill Sans ,
Schriftarten Sans-Serif Typische Vertreter Arial, Helvetica , Calibri , Corbel , Segoe , Gill Sans ,

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

Schriftarten

Monospace

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

Typische Vertreter

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

Anmutung

Technisch, mechanisch, monoton, statisch

Geeignet für

Code-Texte, Ziffern

Schriftarten

Decorative

Schriftarten Decorative Typische Vertreter Comic Sans , Chalkboard , Impact, Marker Felt , Papyrus, Skia ,
Schriftarten Decorative Typische Vertreter Comic Sans , Chalkboard , Impact, Marker Felt , Papyrus, Skia ,
Schriftarten Decorative Typische Vertreter Comic Sans , Chalkboard , Impact, Marker Felt , Papyrus, Skia ,
Schriftarten Decorative Typische Vertreter Comic Sans , Chalkboard , Impact, Marker Felt , Papyrus, Skia ,
Schriftarten Decorative Typische Vertreter Comic Sans , Chalkboard , Impact, Marker Felt , Papyrus, Skia ,
Schriftarten Decorative Typische Vertreter Comic Sans , Chalkboard , Impact, Marker Felt , Papyrus, Skia ,
Schriftarten Decorative Typische Vertreter Comic Sans , Chalkboard , Impact, Marker Felt , Papyrus, Skia ,
Schriftarten Decorative Typische Vertreter Comic Sans , Chalkboard , Impact, Marker Felt , Papyrus, Skia ,

Typische Vertreter

Comic Sans, Chalkboard, Impact, Marker Felt, Papyrus, Skia, Zapfino,

Anmutung

Verspielt, sehr emotional, übertrieben

Geeignet für

Headlines, Eye-Catcher, Conversion

Tools

flippingtypical.com

Tools flippingtypical.com
Tools flippingtypical.com
Tools flippingtypical.com
Tools flippingtypical.com

Tools

Typetester

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

Link:

hPp://www.typetester.org/

Tool

csstypeset

Tool csstypeset Link: hPp://csstypeset.com /

Link:

hPp://csstypeset.com/

Grundlagen und Tipps Fontstacks

«One Font doesn‘t fit all»

Problem: Je nach Betriebssystem und Somware sind verschiedene Schrimen installiert.
Problem:
Je nach Betriebssystem
und Somware sind
verschiedene Schrimen
installiert.
Lösung: Es werden mehrere Schrimen im CSS definiert.
Lösung:
Es werden mehrere
Schrimen im CSS
definiert.

Grundlagen und Tipps Nathan Ford‘s Better Font Stacks

Grundlagen und Tipps Nathan Ford‘s Better Font Stacks Weitere Beispiele:

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

  Ideal 2.   AlternaAve 3.   Verbreitet 4.   Generisch Link: hPp://www.codestyle.org/servlets/FontStack

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
CSS + Flash + Javascript
und Tipps sIFR – scalable Inman Flash Replacement CSS + Flash + Javascript Link: hPp://wiki.novemberborn.net

Link:

hPp://wiki.novemberborn.net

sIFR

Vorteile

Nahezu alle Schriftarten können verwendet werden Verletzt nicht das Copyright Vorteil gegenüber 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 Unterstützung von mobilen Endgeräten (noch) Beschränkung bei nicht lateinischen Alphabeten Druckfunktion wird nicht unterstützt Transparente Hintergründe werden bei IE6 nicht unterstützt

Tool sIFR Generator

Erstellt aus Truetype und Opentype Schriften die entsprechende SWF-Datei

aus Truetype und Opentype Schriften die entsprechende SWF-Datei Link: hPp://www.sifrgenerator.com/wizard2.html

Link:

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

Tool

sifrvault.com

Übersicht von frei verfügbaren Schriften

Link:

hPp://www.sifrvault.com

Tool sifrvault.com •   Übersicht von frei verfügbaren Schriften Link: hPp://www.sifrvault.com
Tool sifrvault.com •   Übersicht von frei verfügbaren Schriften Link: hPp://www.sifrvault.com
Tool sifrvault.com •   Übersicht von frei verfügbaren 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

) •   Headlines ( typo_headline ) •   Text (typo_text ) •   Und als
) •   Headlines ( typo_headline ) •   Text (typo_text ) •   Und als

Web Typografie Externe Quellen zu Web Typography

Tools Blogs Technologien und Trends sIFR (scalable Inman Flash Replacement)

  Tools •   Blogs •   Technologien und Trends –   sIFR ( scalable Inman
  Tools •   Blogs •   Technologien und Trends –   sIFR ( scalable Inman

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