design. kantine. web typography. namics
DESCRIPTION
Antipasti Typografie im Allgemeinen Ein Rückblick vom Buchdruck bis Brody frisch garniert mit einigen Beispielen Primi Piatti Web-Typografie im Besonderen HTML Basics mit einem Schuss Best Practices Secondi Piatti Tipps und Tools Variationen zu Farbe, Raum und Schrift nach Laune des Chefs Dolci Trends und Ausblick Chancen und Möglichkeiten von Mobile Devices, HTML 5 und FlashTRANSCRIPT
![Page 2: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/2.jpg)
…auch das ist Typografie!
![Page 3: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/3.jpg)
Web Typografie1. Was ist Typografie?2. Tipps und Grundlagen3. Ausblick und Trends
![Page 4: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/4.jpg)
Was ist Typografie?„Typographie ist: Auswählen, Gliedern, Anordnen und logisch Lesbarmachen von Schrift.“(Kurt Weidemann)
![Page 5: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/5.jpg)
Was ist Typografie?Typografie in Print
![Page 6: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/6.jpg)
Was ist Typografie?Typografie in Print
![Page 7: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/7.jpg)
Was ist Typografie?Typografie in Print
![Page 8: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/8.jpg)
Was ist Typografie?Typografie in Print
![Page 9: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/9.jpg)
Was ist Typografie?Typografie in Print
![Page 10: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/10.jpg)
Was ist Typografie?Typografie in Print
![Page 11: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/11.jpg)
Was ist Typografie?Typografie in Print
![Page 12: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/12.jpg)
Was ist Typografie?Typografie in Print
![Page 13: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/13.jpg)
Was ist Typografie?Typografie in Print
![Page 14: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/14.jpg)
Was ist Typografie?Typografie in Print
![Page 15: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/15.jpg)
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
![Page 16: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/16.jpg)
Was ist Typografie?Typografie ist Sprache
Worte
Sätze
Absätze
Abschnitte
Kapitel
Dokument
![Page 17: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/17.jpg)
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
![Page 18: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/18.jpg)
Was ist Typografie?Typografie ist Struktur
Überschriften
Seitentitel <title>Kapiteltitel <h1>Haupttitel <h2>Zwischentitel <h3>Titel 4. Ordnung <h4>Titel 5. Ordnung <h5>Titel 6. Ordnung <h6>
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>…
![Page 19: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/19.jpg)
Was ist Typografie?Typografie ist das Web
«Typography is not on the Web, it IS the
Web»Mark Boulton, FOWD London 2009
![Page 20: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/20.jpg)
Was ist Typografie?Typografie im Web
![Page 21: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/21.jpg)
Was ist Typografie?Typografie im Web
![Page 22: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/22.jpg)
Was ist Typografie?Typografie im Web
![Page 23: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/23.jpg)
Was ist Typografie?Typografie im Web
![Page 24: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/24.jpg)
Was ist Typografie?Typografie im Web
![Page 25: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/25.jpg)
Was ist Typografie?Typografie im Web
![Page 26: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/26.jpg)
Was ist Typografie?Typografie im Web
![Page 27: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/27.jpg)
Was ist Typografie?Typografie im Web
![Page 28: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/28.jpg)
Was ist Typografie?Typografie im Web
![Page 29: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/29.jpg)
Was ist Typografie?Typografie im Web
![Page 30: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/30.jpg)
Was ist Typografie?Typografie im Web
![Page 31: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/31.jpg)
Was ist Typografie?Typografie ist Benutzererlebnis
«Good typography improves user experience»
![Page 32: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/32.jpg)
Grundlagen und Tipps
![Page 33: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/33.jpg)
Grundlagen und TippsGestaltungsraster
«Auch Text braucht Luft zum Atmen»
![Page 34: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/34.jpg)
Gestaltungsraster960 Grid - 24er Raster
![Page 35: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/35.jpg)
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
![Page 36: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/36.jpg)
ToolsBlueprint Grid CSS Generator
Website zur Berechnung verschiedener Abständen und Rasterteilung.Erzeugt auch eine entsprechende CSS-Datei
bgg.kematzy.com/www.blueprintcss.org/
![Page 37: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/37.jpg)
ToolsBoks
Adobe Air Applikation zur Berechnung von beliebigen Rastern
Inkl. CSS-Datei
www.toki-woki.net/p/Boks/
![Page 38: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/38.jpg)
GestaltungsrasterBeispiel
![Page 39: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/39.jpg)
Grundlagen und TippsGrössen und Abstände
«Mut zur Lücke»
![Page 40: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/40.jpg)
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
![Page 41: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/41.jpg)
Grössen und AbständeAbsatzformatierung – Abstand nach einem Absatz
p { margin-bottom:1.25em }
Abstand = min. 2/3 der Zeilenhöhe
![Page 42: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/42.jpg)
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
![Page 43: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/43.jpg)
Grundlagen und TippsSpationierung
«Yes, we kern»
![Page 44: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/44.jpg)
VersalienHeadlines
www.prospermag.com/article/284-162www.akzonobel.com/corporate_governance/supervisory_board/
![Page 45: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/45.jpg)
SpationierungPSD vs HTML/CSS
Einheit: Pixel oder em PSD-Mockup 100 = 0.1em (CSS)
![Page 46: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/46.jpg)
Grundlagen und TippsVersalien
«The Next BIG Thing»
![Page 48: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/48.jpg)
VersalienKategorieüberschriften
www.virgin.com/richard-branson/blog/
www.typenuts.com/
![Page 49: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/49.jpg)
Grundlagen und TippsFarbkontraste
«Bei Nacht sind alle Katzen grau»
![Page 50: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/50.jpg)
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
![Page 51: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/51.jpg)
ToolColor Contrast Analyzer
Foreground: #FFFFFF Background: #0E2859The contrast ratio 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 presentation of text and images of text has a contrast ratio 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 presentation of text and images of text has a contrast ratio of at least 7:1 (Level AAA).
www.paciellogroup.com
![Page 52: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/52.jpg)
ToolColor Contrast Analyzer
Foreground: #A7A7A7 Background: #0E2859The contrast ratio 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 presentation of text and images of text has a contrast ratio 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 presentation of text and images of text has a contrast ratio of at least 7:1 (Level AAA).
www.paciellogroup.com
![Page 53: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/53.jpg)
ToolColor Contrast Analyzer
Foreground: #787878 Background: #0E2859The contrast ratio 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 presentation of text and images of text has a contrast ratio 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 presentation of text and images of text has a contrast ratio of at least 7:1 (Level AAA).
www.paciellogroup.com
![Page 54: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/54.jpg)
FarbkontrasteVordergrund / Hintergrund
Kontrastverbesserung bei Mouseover / Focus
Abgrenzung zur Umgebung
![Page 55: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/55.jpg)
Grundlagen und TippsUnterstrichene Links
«Think different»
![Page 56: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/56.jpg)
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
![Page 57: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/57.jpg)
Unterstrichene LinksDie Lösung
a {text-decoration: none;
border-bottom: 1px }
![Page 58: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/58.jpg)
Unterstrichene LinksDie Lösung – mehr Abstand
![Page 59: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/59.jpg)
Unterstrichene LinksDie Lösung - gepunktet
![Page 60: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/60.jpg)
Unterstrichene LinksDie Lösung - gestrichelt
![Page 61: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/61.jpg)
Grundlagen und TippsSchriftarten
«Es muss nicht immer Arial
sein»
![Page 62: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/62.jpg)
I love You
SchriftartenTonalität
![Page 63: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/63.jpg)
I love You
SchriftartenTonalität
![Page 64: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/64.jpg)
I love You
SchriftartenTonalität
![Page 65: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/65.jpg)
I kill You
SchriftartenTonalität
![Page 66: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/66.jpg)
I kill You
SchriftartenTonalität
![Page 67: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/67.jpg)
SchriftartenSerif
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
![Page 68: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/68.jpg)
SchriftartenSans-Serif
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
![Page 69: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/69.jpg)
SchriftartenMonospace
Typische Vertreter Andale Mono, Consolas, Courier, Courier New, Monaco, Bitstream Vera Sans Mono
Anmutung Technisch, mechanisch, monoton, statisch
Geeignet für Code-Texte, Ziffern
![Page 70: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/70.jpg)
SchriftartenCursive
Typische Vertreter Edwardian Script ITC, Apple Chancery, Zapfino, Papyrus
Anmutung Feierlich, emotional, festlich, antik
Geeignet für Headlines, Eye-Catcher, Titel
![Page 71: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/71.jpg)
SchriftartenDecorative
Typische Vertreter Comic Sans, Chalkboard, Impact, Marker Felt, Skia,
Anmutung Verspielt, sehr emotional, übertrieben
Geeignet für Headlines, Eye-Catcher, Conversion
![Page 72: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/72.jpg)
Toolsflippingtypical.com
![Page 75: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/75.jpg)
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.
![Page 76: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/76.jpg)
Grundlagen und TippsNathan Ford‘s Better Font Stacks
![Page 77: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/77.jpg)
Grundlagen und TippsNathan Ford‘s Better Font Stacks
1. Ideal2. Alternative3. Verbreitet4. Generisch
Weitere Beispiele: www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/
1 2 3 4
![Page 78: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/78.jpg)
Grundlagen und TippsFallstricken
Zu beachten sind:LaufweiteSonderzeichenZeichensätze
![Page 79: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/79.jpg)
ToolWeb-safe Fonts
www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/
![Page 80: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/80.jpg)
ToolFont Stack Builder
www.codestyle.org/servlets/FontStack
![Page 81: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/81.jpg)
Ausblick und Trends
![Page 82: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/82.jpg)
Ausblick und TrendsSchriftenenbindung mit Javascript
«Web Font Fight Club»
(Teil 1)
![Page 83: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/83.jpg)
Ausblick und TrendsSchriftenenbindung mit Javascript
sIFR Cufon Facelift (FLIR)
Technologie JS, CSS, Flash JS, CSS, VSA, JS, CSS, SVG & Canvas
JS, CSS, PHP, (Bilder)
Selektierbar Ja Teilweise Nein
skalierbar Ja Ja Ja
Druck Ja, mit Print CSS Ja Ja
Interaktivität
beschränkt beschränkt beschränkt
Link wiki.novemberborn.net/sifr/
wiki.github.com/sorccu/cufon/
flir.mawhorter.net/
![Page 84: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/84.jpg)
Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR
Pro OpenType- und TrueType-
Schriften sind geeignet Vorteil gegenüber Bildern
bei Suchmaschinen und Barrierefreiheit
Text ist skalierbar Text kann selektiert und
kopiert werden
![Page 85: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/85.jpg)
Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR
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
![Page 86: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/86.jpg)
Ausblick und TrendsSchriftenenbindung mit Javascript – sIFR
sIFR GeneratorErstellt aus TrueType und OpenType Schriften die entsprechende SWF-Datei
www.sifrgenerator.com/wizard2.html
![Page 87: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/87.jpg)
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
![Page 88: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/88.jpg)
Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon
Contra Eingeschränkte Interaktivität Beschränkung bei nicht
lateinischen Alphabeten Text lässt sich nicht kopieren
![Page 89: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/89.jpg)
Ausblick und TrendsSchriftenenbindung mit Javascript – Cufon
Cufon GeneratorErstellt aus TrueType und OpenType Schriften die entsprechende Javascript-DateiUntergruppen auch für Kyrillische und koptische Schriften möglich.
cufon.shoqolate.com/generate/
![Page 90: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/90.jpg)
Ausblick und TrendsSchrifteinbindung mit CSS (font-face)
«Web Font Fight Club»
(Teil 2)
![Page 91: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/91.jpg)
Ausblick und TrendsSchrifteinbindung mit CSS (font-face)
Einbinden von Zeichensätzen mittels @font-face.
www.zenelements.com/blog/css3-embed-font-face/undwww.css3.info/preview/web-fonts-with-font-face/
![Page 92: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/92.jpg)
Ausblick und TrendsSchrifteinbindung mit CSS (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
![Page 93: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/93.jpg)
Ausblick und TrendsSchrifteinbindung mit CSS (font-face)
Contra Datei wird bei
umfangreichen Zeichensätze sehr gross ( >1MB)
Allerdings:Lizenzproblem!!!
![Page 94: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/94.jpg)
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-freef
onts-for-professional-design/
![Page 95: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/95.jpg)
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
![Page 96: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/96.jpg)
Ausblick und TrendsWeb-Services für Schrifteinbindung
AnbieterTypekit – www.typekit.comTypotheque – www.typotheque.comKernest – www.kernest.comFontdeck – www.fontdeck.com
![Page 97: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/97.jpg)
Ausblick und TrendsCSS 3 – Mehrspaltiger Text
«Die HTML 5.0»
![Page 98: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/98.jpg)
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/
![Page 99: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/99.jpg)
Ausblick und TrendsCSS 3 – Textschatten (text-shadow)
text-shadow: Apx Bpx Cpx #XXX;- Apx = x-Achse- Bpx = y-Achse- Cpx = Weichzeichnen- #XXX = HEX-Farbwert
www.westciv.com/tools/shadows/
![Page 100: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/100.jpg)
Ausblick und TrendsCSS 3 – Textschatten (text-shadow)
![Page 101: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/101.jpg)
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/
![Page 102: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/102.jpg)
Ausblick und TrendsCSS 3 Web-Kit – Showcase
www.tylergaw.com/lab/themanfromhollywood/
![Page 103: Design. Kantine. Web Typography. Namics](https://reader034.vdocuments.net/reader034/viewer/2022051314/54c8130e4a795963728b45cc/html5/thumbnails/103.jpg)
Claus Medvesek. Senior AD UX.14. April 2010. Design. Kantine. Web Typografie. Namics.