Design. Kantine. Web Typography. Namics.

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Claus Medvesek.<br />14. April 2010. Design. Kantine. Web Typografie. Namics. <br />

…auch das ist Typografie!<br />

Web Typografie<br />Was ist Typografie?<br />Tipps und Grundlagen<br />Ausblick und Trends<br />

Was ist Typografie?<br />„Typographie ist: Auswählen, Gliedern, Anordnen und logisch Lesbarmachen von Schrift.“<br />(Kurt...

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie in Print<br />

Was ist Typografie?Typografie ist kontextabhängig<br />Medium<br />Technologie<br />Format<br />Material<br />Leser / Publ...

Was ist Typografie?Typografie ist Sprache<br />Worte<br />Sätze<br />Absätze<br />Abschnitte<br />Kapitel<br />Dokument<br />

Autor<br />Strukturiert die Informationen nach seinem eigenen mentalen Modell <br />Was ist Typografie?Typografie ist Komm...

Was ist Typografie?Typografie ist Struktur<br />Überschriften<br />Seitentitel <title><br />Kapiteltitel <h1><br />Hauptti...

Was ist Typografie?Typografie ist das Web<br />«Typographyisnot on the Web, it IS the Web»<br />Mark Boulton, FOWD London ...

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie im Web<br />

Was ist Typografie?Typografie ist Benutzererlebnis<br />«Good typographyimprovesuserexperience»<br />

Grundlagen und Tipps<br />

Grundlagen und TippsGestaltungsraster<br />«Auch Text braucht Luft zum Atmen»<br />

Gestaltungsraster960 Grid - 24er Raster<br />

Gestaltungsraster960 Grid - 12er Raster<br /><ul><li>Fixe Breite von max. 960 Pixel

Zentriertes Layout

12er, 16er oder 24er Teilung

Flexibilität in der Gestaltung und Anordnung der Elemente</li></li></ul><li>ToolsBlueprint Grid CSS Generator<br />Website...

ToolsBoks<br />Adobe Air Applikation zur Berechnung von beliebigen Rastern <br />Inkl. CSS-Datei<br />www.toki-woki.net/p/...

GestaltungsrasterBeispiel<br />

GestaltungsrasterBeispiel<br />

Grundlagen und TippsGrössen und Abstände<br />«Mut zur Lücke»<br />

Grössen und AbständeTextbreite und Zeilenabstände<br />10 bis 15 Worte je Zeile sind optimal<br />Zeilenabstand von 133-15...

Grössen und AbständeAbsatzformatierung – Abstand nach einem Absatz<br />p { margin-bottom:1.25em }<br />Abstand = min. 2/3...

Grössen und AbständeAbsatzformatierung – Einrückung mittels erster Zeile<br />p { margin-bottom:0 }<br />p + p { text-inde...

Grundlagen und TippsSpationierung<br />«Yes, wekern»<br />

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

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

Grundlagen und TippsVersalien<br />«TheNext BIG Thing»<br />

VersalienHeadlines<br />www.tputh.com/<br />

VersalienKategorieüberschriften<br />www.virgin.com/richard-branson/blog/<br />www.typenuts.com/<br />

Grundlagen und TippsFarbkontraste<br />«Bei Nacht sind alle Katzen grau»<br />

FarbkontrasteGrundlagen und WAI<br />Zu starke Kontraste sind unangenehm<br />Schriftglättung (Anti-Alias) bei hohen Kontr...

ToolColor ContrastAnalyzer<br />Foreground: #FFFFFF <br />Background: #0E2859<br />Thecontrastratiois: 14.1:1<br /><ul><li...

Large text passed at level AA</li></ul>Guideline 1.4.3: Contrast (Minimum) - WCAG 2 Thevisualpresentation of text and ima...

Large text passed at level AAA</li></ul>Guideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and i...

ToolColor ContrastAnalyzer<br />Foreground: #A7A7A7 <br />Background: #0E2859<br />Thecontrastratiois: 6.0:1<br /><ul><li>...

Large text passed at level AAGuideline 1.4.3: Contrast (Minimum) - WCAG 2 Thevisualpresentation of text and images of tex...

Text failed at level AAA

Large text passed at level AAAGuideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and images of t...

ToolColor ContrastAnalyzer<br />Foreground: #787878 <br />Background: #0E2859<br />Thecontrastratiois: 3.2:1<br /><ul><li>...

Large text passed at level AAGuideline 1.4.3: Contrast (Minimum) - WCAG 2 Thevisualpresentation of text and images of tex...

Text failed at level AAA

Large text failed at level AAAGuideline 1.4.6: Contrast (Enhanced) - WCAG 2 Thevisualpresentation of text and images of t...

FarbkontrasteVordergrund / Hintergrund<br />Kontrastverbesserung bei Mouseover / Focus<br />Abgrenzung zur Umgebung<br />

Grundlagen und TippsUnterstrichene Links<br />«Think different»<br />

Grundlagen und TippsUnterstrichene Links<br />Problem<br /><ul><li> Steht zu dicht am Text

Hat die Farbe der Schrift</li></ul>= Hässlich<br />Fakt<br /><ul><li> Jeder erkennt die Funktion

Wird von Nielsen empfohlen</li></ul>= Es funktioniert<br />

Unterstrichene LinksDie Lösung <br />a {text-decoration: none;<br />border-bottom: 1px }<br />

Unterstrichene LinksDie Lösung – mehr Abstand<br />

Unterstrichene LinksDie Lösung - gepunktet<br />

Unterstrichene LinksDie Lösung - gestrichelt<br />

Grundlagen und TippsSchriftarten<br />«Es muss nicht immer Arial sein»<br />

I loveYou<br />SchriftartenTonalität<br />

I loveYou<br />SchriftartenTonalität<br />

I loveYou<br />SchriftartenTonalität<br />

I kill You<br />SchriftartenTonalität<br />

I kill You<br />SchriftartenTonalität<br />

SchriftartenSerif<br />

SchriftartenSans-Serif<br />

SchriftartenMonospace<br />

SchriftartenCursive<br />

SchriftartenDecorative<br />

Toolsflippingtypical.com<br />

ToolsTypetester<br />www.typetester.org/<br />

Toolcsstypeset<br />http://csstypeset.com/<br />

Grundlagen und TippsFontstacks<br />«One Font doesn‘t fit all»<br />Problem<br />Je nach Betriebssystem und Software sind ...

Grundlagen und TippsNathan Ford‘sBetter Font Stacks<br />

Grundlagen und TippsNathan Ford‘sBetter Font Stacks<br />1<br />2<br />3<br />4<br />Ideal<br /> Alternative<br /> Verbrei...

Grundlagen und TippsFallstricken<br />Zu beachten sind:<br />Laufweite<br />Sonderzeichen<br />Zeichensätze<br />

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

ToolFont StackBuilder<br />www.codestyle.org/servlets/FontStack<br />

Ausblick und Trends<br />

Ausblick und TrendsSchriftenenbindung mit Javascript<br />«Web Font Fight Club»<br />(Teil 1)<br />

Ausblick und TrendsSchriftenenbindung mit Javascript<br />

Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR<br />Pro<br />OpenType- und TrueType-Schriftensind geeignet<br...

Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR<br />Contra<br />Performanceproblem bei mehr als zehn Elemente...

Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR<br />sIFR Generator<br />Erstellt aus TrueType und OpenType Sc...

Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon<br />Pro<br />Gute Performance<br />Kommt ohne Flash aus (iPa...

Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon<br />Contra<br />Eingeschränkte Interaktivität<br />Beschränk...

Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon<br />Cufon Generator<br />Erstellt aus TrueType und OpenType ...

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

Share Slideshare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

LinkedIn
Facebook
Twitter
Email

Replay

Top clipped slide

View on Slideshare

1 of 103 Ad

1 of 103 Ad