Design. Kantine. Web Typography. Namics.

Claus Medvesek.,[object Object],14. April 2010. Design. Kantine. Web Typografie. Namics. ,[object Object]

…auch das ist Typografie!,[object Object]

Web Typografie,[object Object],Was ist Typografie?,[object Object],Tipps und Grundlagen,[object Object],Ausblick und Trends,[object Object]

Was ist Typografie?,[object Object],„Typographie ist: Auswählen, Gliedern, Anordnen und logisch Lesbarmachen von Schrift.“,[object Object],(Kurt Weidemann),[object Object]

Was ist Typografie?Typografie in Print,[object Object]

Was ist Typografie?Typografie ist kontextabhängig,[object Object],Medium,[object Object],Technologie,[object Object],Format,[object Object],Material,[object Object],Leser / Publikum,[object Object],Umgebung,[object Object],Persönliche Stimmung,[object Object],Vorlieben / Interessen,[object Object],Autor / Absender,[object Object],Art der Information,[object Object],Verwendungszweck,[object Object],Absicht ,[object Object]

Was ist Typografie?Typografie ist Sprache,[object Object],Worte,[object Object],Sätze,[object Object],Absätze,[object Object],Abschnitte,[object Object],Kapitel,[object Object],Dokument,[object Object]

Autor,[object Object],Strukturiert die Informationen nach seinem eigenen mentalen Modell ,[object Object],Was ist Typografie?Typografie ist Kommunikation,[object Object],Designer,[object Object],Verbindet beide Modelle mit Hilfe von etablierten Regeln und Erfahrung,[object Object],Leser,[object Object],Verarbeitet die Informationen nach seinem eigenen mentalen Modell ,[object Object]

Was ist Typografie?Typografie ist Struktur,[object Object],Überschriften,[object Object],Seitentitel <title>,[object Object],Kapiteltitel <h1>,[object Object],Haupttitel <h2>,[object Object],Zwischentitel <h3>,[object Object],Titel 4. Ordnung <h4>,[object Object],Titel 5. Ordnung <h5>,[object Object],Titel 6. Ordnung <h6>,[object Object],Absätze & Listen,[object Object],Normaler Absatz <p>,[object Object],Ausdruck <dfn>,[object Object],Code <code>,[object Object],Code-Abschnitt <samp>,[object Object],Variable <var>,[object Object],Zitat <blockquote>,[object Object],Quelle <cite>,[object Object],Liste <ul>,[object Object],Auflistung <ol>,[object Object],Definitionsliste <dl><dt><dd>,[object Object],…,[object Object],Textauszeichnung,[object Object],Hervorhebung <strong>,[object Object],Betonung <em>,[object Object],Bold / fett <b>,[object Object],Italic / kursiv <i>,[object Object],Big / Gross <big>,[object Object],Small / klein <small>,[object Object],Teletext <tt>,[object Object],Hochgestellt <sup>,[object Object],Tiefgestellt <sub>,[object Object],…,[object Object]

Was ist Typografie?Typografie ist das Web,[object Object],«Typographyisnot on the Web, it IS the Web»,[object Object],Mark Boulton, FOWD London 2009,[object Object]

Was ist Typografie?Typografie im Web,[object Object]

Was ist Typografie?Typografie ist Benutzererlebnis,[object Object],«Good typographyimprovesuserexperience»,[object Object]

Grundlagen und Tipps,[object Object]

Grundlagen und TippsGestaltungsraster,[object Object],«Auch Text braucht Luft zum Atmen»,[object Object]

Gestaltungsraster960 Grid - 24er Raster,[object Object]

Gestaltungsraster960 Grid - 12er Raster,[object Object],[object Object]

Flexibilität in der Gestaltung und Anordnung der Elemente,[object Object]

ToolsBoks,[object Object],Adobe Air Applikation zur Berechnung von beliebigen Rastern ,[object Object],Inkl. CSS-Datei,[object Object],www.toki-woki.net/p/Boks/,[object Object]

GestaltungsrasterBeispiel,[object Object]

Grundlagen und TippsGrössen und Abstände,[object Object],«Mut zur Lücke»,[object Object]

Grössen und AbständeTextbreite und Zeilenabstände,[object Object],10 bis 15 Worte je Zeile sind optimal,[object Object],Zeilenabstand von 133-150% der Schriftgrösse ist ideal,[object Object],Grössere Textbreite bedingt einen grösseren Zeilenabstand,[object Object]

Grössen und AbständeAbsatzformatierung – Abstand nach einem Absatz,[object Object],p { margin-bottom:1.25em },[object Object],Abstand = min. 2/3 der Zeilenhöhe,[object Object]

Grössen und AbständeAbsatzformatierung – Einrückung mittels erster Zeile,[object Object],p { margin-bottom:0 },[object Object],p + p { text-indent:1em; margin-top:0 },[object Object],Einrückung = min. Zeilenhöhe,[object Object]

Grundlagen und TippsSpationierung,[object Object],«Yes, wekern»,[object Object]

VersalienHeadlines,[object Object],www.prospermag.com/article/284-162,[object Object],www.akzonobel.com/corporate_governance/supervisory_board/,[object Object]

SpationierungPSD vs HTML/CSS,[object Object],Einheit: Pixel oder em,[object Object],PSD-Mockup 100 = 0.1em (CSS),[object Object]

Grundlagen und TippsVersalien,[object Object],«TheNext BIG Thing»,[object Object]

VersalienHeadlines,[object Object],www.tputh.com/,[object Object]

VersalienKategorieüberschriften,[object Object],www.virgin.com/richard-branson/blog/,[object Object],www.typenuts.com/,[object Object]

Grundlagen und TippsFarbkontraste,[object Object],«Bei Nacht sind alle Katzen grau»,[object Object]

FarbkontrasteGrundlagen und WAI,[object Object],Zu starke Kontraste sind unangenehm,[object Object],Schriftglättung (Anti-Alias) bei hohen Kontrasten ist problematisch,[object Object],Kontraste können Inhalte strukturieren,[object Object],WAI Standards sind zu berücksichtigen,[object Object]

ToolColor ContrastAnalyzer,[object Object],Foreground: #FFFFFF ,[object Object],Background: #0E2859,[object Object],Thecontrastratiois: 14.1:1,[object Object],[object Object]

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).,[object Object],[object Object]

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).,[object Object],www.paciellogroup.com,[object Object]

ToolColor ContrastAnalyzer,[object Object],Foreground: #A7A7A7 ,[object Object],Background: #0E2859,[object Object],Thecontrastratiois: 6.0:1,[object Object],[object Object]

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

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).www.paciellogroup.com,[object Object]

ToolColor ContrastAnalyzer,[object Object],Foreground: #787878 ,[object Object],Background: #0E2859,[object Object],Thecontrastratiois: 3.2:1,[object Object],[object Object]

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).www.paciellogroup.com,[object Object]

FarbkontrasteVordergrund / Hintergrund,[object Object],Kontrastverbesserung bei Mouseover / Focus,[object Object],Abgrenzung zur Umgebung,[object Object]

Grundlagen und TippsUnterstrichene Links,[object Object],«Think different»,[object Object]

Grundlagen und TippsUnterstrichene Links,[object Object],Problem,[object Object],[object Object]

Hat die Farbe der Schrift= Hässlich,[object Object],Fakt,[object Object],[object Object]

Wird von Nielsen empfohlen= Es funktioniert,[object Object]

Unterstrichene LinksDie Lösung ,[object Object],a {text-decoration: none;,[object Object],border-bottom: 1px },[object Object]

Unterstrichene LinksDie Lösung – mehr Abstand,[object Object]

Unterstrichene LinksDie Lösung - gepunktet,[object Object]

Unterstrichene LinksDie Lösung - gestrichelt,[object Object]

Grundlagen und TippsSchriftarten,[object Object],«Es muss nicht immer Arial sein»,[object Object]

I loveYou,[object Object],SchriftartenTonalität,[object Object]

I kill You,[object Object],SchriftartenTonalität,[object Object]

SchriftartenSerif,[object Object]

SchriftartenSans-Serif,[object Object]

SchriftartenMonospace,[object Object]

SchriftartenCursive,[object Object]

SchriftartenDecorative,[object Object]

Toolsflippingtypical.com,[object Object]

ToolsTypetester,[object Object],www.typetester.org/,[object Object]

Toolcsstypeset,[object Object],http://csstypeset.com/,[object Object]

Grundlagen und TippsFontstacks,[object Object],«One Font doesn‘t fit all»,[object Object],Problem,[object Object],Je nach Betriebssystem und Software sind verschiedene Schriften installiert.,[object Object],Lösung,[object Object],Es werden mehrere Schriften im CSS definiert.,[object Object]

Grundlagen und TippsNathan Ford‘sBetter Font Stacks,[object Object]

Grundlagen und TippsNathan Ford‘sBetter Font Stacks,[object Object],1,[object Object],2,[object Object],3,[object Object],4,[object Object],Ideal,[object Object], Alternative,[object Object], Verbreitet,[object Object], Generisch,[object Object],Weitere Beispiele: ,[object Object],www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/,[object Object]

Grundlagen und TippsFallstricken,[object Object],Zu beachten sind:,[object Object],Laufweite,[object Object],Sonderzeichen,[object Object],Zeichensätze,[object Object]

ToolWeb-safe Fonts ,[object Object],www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/,[object Object]

ToolFont StackBuilder,[object Object],www.codestyle.org/servlets/FontStack,[object Object]

Ausblick und Trends,[object Object]

Ausblick und TrendsSchriftenenbindung mit Javascript,[object Object],«Web Font Fight Club»,[object Object],(Teil 1),[object Object]

Ausblick und TrendsSchriftenenbindung mit Javascript,[object Object]

Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR,[object Object],Pro,[object Object],OpenType- und TrueType-Schriftensind geeignet,[object Object],Vorteil gegenüber Bildern bei Suchmaschinen und Barrierefreiheit,[object Object],Text ist skalierbar,[object Object],Text kann selektiert und kopiert werden,[object Object]

Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR,[object Object],Contra,[object Object],Performanceproblem bei mehr als zehn Elementen pro Seite,[object Object],Benötigt Flash (iPad, iPhone),[object Object],Beschränkung bei nicht lateinischen Alphabeten ,[object Object],Keine Druckfunktion,[object Object],Transparente Hintergründe werden bei IE6 nicht unterstützt,[object Object]

Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR,[object Object],sIFR Generator,[object Object],Erstellt aus TrueType und OpenType Schriften die entsprechende SWF-Datei,[object Object],www.sifrgenerator.com/wizard2.html,[object Object]

Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon,[object Object],Pro,[object Object],Gute Performance,[object Object],Kommt ohne Flash aus (iPad, iPhone),[object Object],Text ist skalierbar,[object Object],Grosse Auswahl an Schriften,[object Object],Gute Optimierungsmöglichkeit beim Zusammenstellen der Zeichen,[object Object]

Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon,[object Object],Contra,[object Object],Eingeschränkte Interaktivität,[object Object],Beschränkung bei nicht lateinischen Alphabeten ,[object Object],Text lässt sich nicht kopieren,[object Object]

Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon,[object Object],Cufon Generator,[object Object],Erstellt aus TrueType und OpenType Schriften die entsprechende Javascript-Datei,[object Object],Untergruppen auch für Kyrillische und koptische Schriften möglich.,[object Object],cufon.shoqolate.com/generate/,[object Object]

Ausblick und TrendsSchrifteinbindung mit CSS (font-face),[object Object],«Web Font Fight Club»,[object Object],(Teil 2),[object Object]

Design. Kantine. Web Typography. Namics.

Design. Kantine. Web Typography. Namics.

Recommended

More Related Content

Viewers also liked

Viewers also liked(16)

Similar to Design. Kantine. Web Typography. Namics.

Similar to Design. Kantine. Web Typography. Namics.(20)

Design. Kantine. Web Typography. Namics.