Webfonts in der Praxis - Teil 1 -

Webfonts in der Praxis Teil 1: Auf Fontsuche Sylvia Egger

Ausgangspunkt Wir brauchen Fonts ...

Welche Möglichkeiten haben wir?  Gratis-Webfonts  Selbst gehosted (z.B. Font Squirrel bzw. die freie Wildbahn ...)  Fremd gehosted (z.B. Google Webfonts)  Kommerzielle Webfonts  Selbst gehosted (z.B. FontShop, Fontspring)  Fremd gehosted (z.B.Typekit, Fonts.com) 3 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Gratis-Webfonts selbst gehosted Font Squirrel und die freie Wildbahn ...

5 Quelle: Screenshots Font Squirrel,Webfonts.info

Gratis-Webfonts – Quellen  Webfonts.info  Regelmäßig aktualisierte Liste von Gratis-Webfonts  Font Squirrel  Über 500 Fonts  Bei Auswahl achten auf: @FF – font-face Kompatibilität  @font-face Generator  The League of Moveable Type  Und und und ... 6 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Font Squirrel: Stufiges Paket  Fonts ohne @font-face Optimierung  Fonts mit @font-face Optimierung (@FF-Label)  Fonts mit @FF-Label liegen als Paket schon vor (@font- face Kits) incl.Webpreview  Auch hier beachten: Lizenzbestimmung! Bsp.: Lizenzbedingung Museo San 7 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Font Squirrel: @font-face Kits  Fertige Fonts zum Download  Subset  Formatauswahl  Live-Vorschau  Webvorschau minimal: muss mit dem jeweiligen Browser genutzt werden (nur Annäherungswert) Quelle: Screenshot Font Sqirrel @font-face Kit 8 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Quelle: Screenshot Font Squirrel @font-face Kit Generator 9 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Gratis-Webfonts fremd gehosted Google Webfonts

11 Quelle: Screenshot Google font directory

Gratis-Webfonts – Google WebFonts  ca. 20 Fonts  Vorschau mit Hilfe von Font Previewer  Google WebFont Loader: Javascript-Library, mit der man den Ladevorgang feinjustieren kann.  Auch für andere Font-Hoster wie Typekit nutzbar  Stellt alternative CSS-Klassen wie wf-inactive zur Verfügung, um den Defaultfall nachzubearbeiten (etwa wenn die Fonts von Google nicht geladen werden).  Alle Fonts lassen sich auch herunterladen und selbst hosten. 12 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Gratis-Webfonts – Google WebFonts  Browsersupport  Google Chrome: version 4.249.4+  Mozilla Firefox: version: 3.5+  Apple Safari: version 3.1+  Opera: version 10.5+  Microsoft Internet Explorer: version 6+  Kein Support für iPhone, iPad, iPod oder Android 13 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

14 Quelle: Screenshot Google Font previewer

Kommerzielle Webfonts selbst gehosted FontShop & Co.

16 Quelle: Screenshots FontShop Fontauswahl,Webfonts.info

Kommerzielle Webfonts – selbst gehostet  Bei der Fontlizenz ist darauf zu achten auf:  EULA (End User Licence Agreement)  Dass es Infos zum Embedding gibt  Einbindung via @font-face muss erlaubt sein.  Ein Negativbeispiel von Mota Italic: „Using our fonts in CSS with @font-face is not allowed.“  Weitere Einschränkungen beachten wie  Domain (z.B. Fontspring)  Subset (z.B. Fontspring)  Anzahl Besucher, Bandbreite (z.B. FontShop)  Kommentar zu Lizenz und Copyright muss beibehalten werden (z.B. Fontspring) 17 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

FontShop: Web Fonts 18 Quelle: Screenshot FontShop Web Fonts - Fontauswahl

FontShop: Fontauswahl  Format = Web  Lizenz: Pageview (Beachten bei Großkunden) Quelle: Screenshot FontShop Webfonts - Fontauswahl 19 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Kommerzielle Webfonts – selbst gehostet  FontShop:Web Fonts  Über 100 weboptimierte Fonts  Kennzeichen: Grafik WEB für weboptimierte Fonts  Formate: WOFF und EOT (IE)  Keine Unterstützung für iPhone, iPad, iPod (SVG)  Vorschau der Web Fonts: FontFonter  Webfonts.info: Übersicht über kommerzielle Anbieter, die Webfonts zur Verfügung stellen  Die meisten Fonts werden über Fontspring vertrieben 20 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Fontspring: Auswahl der Fonts  @font-face Lizenz ist bereits angewählt  Unbegrenzte Domains kann man hinzuwählen  Anwählbare Optionen unterscheiden sich pro Font Quelle: Screenshot Fontspring - Fontauswahl 21 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Kommerzielle Webfonts – selbst gehostet  Fontspring  Über 1000 Fonts (davon 52 Gratis-Webfonts)  Domainabhängig, aber zu einem geringfügigen Aufpreis für alle Domains lizenzierbar  Alle Fonts sind auto-hinted – gute Rendering-Qualität (teilweise wirklich besser als bei Typekit)  Ein font-face-Paket enthält:  HTML/CSS-Datei  Dateien:  WOFF  TTF WebOnly (nicht desktop-fähig)  EOT (IE)  SVG (iPhone, iPad, iPod) 22 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Kommerzielle Webfonts Font Hosting And Obfuscation Services (FHOS) TypeKit & Co.

You can view FHOS as a phase. Services are innovating. Richard Fink: Web Fonts at the Crossing

Webfont-Services Einige Beispiele

Wefont-Service: Typekit 26 Quelle: Screenshot Typekit – Webfont Browserpreview

Wefont-Service: Fontdeck - Auswahl Quelle: Screenshot Fontdeck - Fontauswahl 27 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Wefont-Service: Fontdeck - Bezahlung Quelle: Screenshot Fontdeck – Projektauswahl - Testaccount 28 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Service: FontsLive - Auswahl Quelle: Screenshot FontsLive - Fontauswahl 29 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Service: FontsLive – Bezahlung/Account Quelle: Screenshot FontsLive - Bezahlung Quelle: Screenshot FontsLive - Account 30 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Service: fonts.com – Auswahl Quelle: Screenshot fonts.com Webfonts - Fontauswahl 31 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Service: fonts.com – Account Quelle: Screenshot fonts.com Webfonts - Account 32 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Service: Web Fonts - Kernest – Auswahl Quelle: Screenshot Webfonts Kernest - Fontauswahl 33 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Service: Web Fonts - Kernest – Bezahlung Quelle: Screenshot Webfonts Kernest - Bezahlung 34 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Service: WebInk– Type Drawer Quelle: Screenshot WebInk – Vorschau der Fonts via Type Drawer 35 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Service: WebInk – Auswahl / Konfiguration Quelle: Screenshot WebInk Konfigurierung der Bandbreite Quelle: Screenshot WebInk – Auswahl der Font Libraries 36 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Services: Übersicht 37 Quelle: Screenshots Webfont-Services Übersicht – sprungmarker.de

Webfont-Services Vor- und Nachteile

Webfont-Services: Vorteile  Keine Lizenzprobleme (mit Ausnahmen)  Größtmögliche Browserkompatibilität  Große Fontauswahl (z.B.Typekit, Fonts.com)  Live-Browser- und Plattform-Preview (z.B.Typekit)  Einfache Handhabe  Schneller Einsatz 39 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Services: Nachteile  Fonts sind nur gemietet (gehosted)  Kosten  Performance (Schriftgröße, mehrere Schriften etc.)  Was macht man mit den Fonts für Print, PDF?  Gibt es eine Möglichkeit, die Fonts auch selbst zu hosten? (meist ja, teuerstes Modell – Enterprise ;))  Unterschiedlichste Kostenmodelle  Der neue Font-Gold-Rush!  Teilweise zu komplexe Abhängigkeiten (Bandbreite, Nutzerzahlen, Fontbibliotheken und dann noch pro Font) 40 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Services: Nachteile  Fonts sind nur bedingt gut weboptimiert  Tests sind immer notwendig!  Katze-im-Sack-Prinzip (z.B. Font-basierte Services wie Fontspring)  Terms of Service müssen genau gelesen werden  Wichtig bei Bandbreiten-Einschränkungen: Wie wird mit Überschreitungen umgegangen?  Wie sieht es für die Zukunft aus?  Datenschutz  Jeder Service sammelt beim Aufruf Daten  Wie werden diese Daten gespeichert?  Gibt es dazu Informationen in den Terms of Services? 41 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Webfont-Services: Beispiel Terms of Service  „Small Batch does not warrant that (i) the Service will meet your specific requirements, (ii) the Service will be uninterrupted, timely, secure, or error-free, (iii) the results that may be obtained from the use of the Service will be accurate or reliable, (iv) the quality of any products, services, information, or other material purchased or obtained by you through the Service will meet your expectations.“  Quelle:Typekit – Terms of Service 42 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

Sylvia Egger – sprungmarker.de  Senior Webproducerin in Köln (brainbits.net)  Die Präsentation auf Slideshare http://www.slideshare.net/sprungmarker  Twitter: @sprungmarkers 43 Sylvia Egger - brainbits.de - sprungmarker.de 02.09.2010

http://sprungmarker.de	293
http://feeds2.feedburner.com	97
http://feeds.feedburner.com	16
http://localhost	1
http://www.linkedin.com	1

Webfonts in der Praxis - Teil 1 -

by Sylvia Egger on Sep 05, 2010

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 408

Statistics

Webfonts in der Praxis - Teil 1 - Presentation Transcript