Page 1

Schriften im Web

Theorie zu Interdisziplin채re Medienproduktion 2 Interaktive Medien, FH Vorarlberg, WS 2009/2010 Flachsmann Christof Dozent: Matt Hubert 29. J채nner 2010


Inhalt

Einleitung.............................................................. 2 Das Problem: Schriften im Web.......................... 3 Bewährte Lösungsansätze.................................. 4

Text als Bild........................................................ 4

Scalable Inman Flash Replacement ................... 4

Einbindung von Schriften über CSS: @font-face.......................................................... 5

Safari bringt neuen Schwung . in die Diskussion.................................................. 6 Neue Ansätze zur Problemlösung...................... 7

Neue Lizenzen für Schriften am Beispiel

Axel von Fontshop.de......................................... 7

Font Replacement über einen Drittanbieter am Beispiel Typekit............................................. 7

Web Open Font Format ..................................... 8

Fazit....................................................................... 9 Vergleich der Lösungsansätze.......................... 10 Links.................................................................... 11

Font Replacement über Webservices............... 11

@font-face Lizenzen ........................................ 11

Weitere Informationen zur Vertiefung................. 11

Literaturverzeichnis........................................... 12

Schriften im Web

1


Einleitung

Ob kleines Ein-Mann Unternehmen oder internationaler Konzern: fast jede Organisation, hat eine bewusst oder unbewusst gewählte Hausschrift. Ziel ist es in der Regel, diese zur Wiedererkennung beitragende Schrift auch in allen Produkten zu verwenden. Diesem Anspruch aber auch auf Webseiten gerecht zu werden, verursacht jedoch immer noch Probleme. „2009 gab IKEA die Futura - ihr typografisches Markenzeichen - zugunsten der Verdana auf, um in Print und Web konsistent auftreten zu können.“ (Herrmann 2010, S. 27) Welche Probleme das sind, sowie deren Ursachen und verschiedene Lösungsansätze sind Thema dieser Arbeit.

Schriften im Web

2


Das Problem: Schriften im Web Bei einem klassischen Gestaltungsprodukt, wie

Größe und Farbe sowie Laufweite und Zeilen-

beispielsweise einer Visitenkarte, hat der Gestalter

abstand vom Gestalter festgelegt. Voraussetzung für

die Möglichkeit, das Ergebnis seiner Arbeit genau zu

eine korrekte Darstellung ist (unter anderem) jedoch,

kontrollieren. Er kann beispielsweise Layout, Papier,

dass die definierte Schriftart am Rechner des Be-

Größe, Farbe oder Schriftart exakt bestimmen und

trachters installiert ist. Denn die Schriftdatei, die dem

eventuelle Abweichungen bei der Produktion des

Ausgabegerät genau vorschreibt, wie ein Buchstabe

Produktes korrigieren (lassen). Der Gestalter hat die

auszusehen hat, ist im Normalfall nicht Bestandteil

volle Kontrolle, wie das Endprodukt beim

der Webseite.

Konsument ankommt.

Ist eine Schriftart auf dem Anzeigegerät des Be-

Vergleicht man das mit der Gestaltung einer Webseite, so gleicht dies angesichts der vielen unkontrollierbaren Faktoren einem gestalterischen

suchers also nicht installiert, ist die Ausgabe des Textes nicht ohne zusätzliche Maßnahmen in der gewünschten Form möglich.

Blindflug. Denn wie eine Webseite beim Betrachter

Die installierten (und somit zur Verfügung stehenden)

dargestellt wird entscheidet nur zum Teil der Gestal-

Schriftarten beschränken sich beim Großteil der

ter (vgl. Santa Maria 2009). Einen weiteren wesentli-

Anwender auf die vom Betriebssystem mitgelieferten

chen Anteil machen Einstellungen beim Anzeigegerät

Schriften. Denn mit dem Kauf eines Betriebssystems

des Betrachters aus, wie zum Beispiel der verwen-

erwirbt der Käufer gleichzeitig die Nutzungsrechte an

dete Browser, das Betriebssystem, die eingestellte

enthaltenen Schriften, so genannten Systemschriften.

Farbanzahl, die Ausgabegröße und -auflösung, um

Diese sind von Betriebssystem zu Betriebsystem

nur eine Handvoll der Faktoren zu nennen.

(sogar von Version zu Version) unterschiedlich.

Der Gestalter definiert mit der Publizierung einer Webseite also lediglich ein Soll-Ergebnis.

Zusätzliche Schriften müssen von jedem Benutzer gesondert gekauft werden. „Fragen des Dateiformats und vor allem lizenzrecht-

Schriften sind ein wesentlicher Bestandteil eines

liche Probleme dürfen (...) dafür verantwortlich sein,

Gestaltungsprodukts. Wie ein Text auf einer Web-

dass von individuellen Schriften im Web bis heute

seite dargestellt werden soll, wird im Allgemeinen

nicht viel zu sehen ist.“ (PUBLISHING PRAXIS 2009,

durch die Definition von Schriftart und -schnitt,

S. 47)

Schriften im Web

3


Bewährte Lösungsansätze Dieses Problem schränkt die Möglichkeiten bei der

sIFR wurde von Mike Davidson und Mark Wubben

Gestaltung von Webseiten stark ein. Bereits seit über

entwickelt, um kurze Textpassagen in einer bestimm-

10 Jahren beschäftigen sich Programmierer und

ten Schriftart auszugeben. sIFR benutzt JavaScript,

Webdesigner deshalb mit dieser Thematik.

CSS und Flash um zu dem gewünschten Ergebnis

Erste Möglichkeiten, das Problem zu umgehen,

zu kommen. Hierfür definiert der Gestalter die Texte,

waren schnell gefunden:

die mit dieser Methode in einer speziellen Schriftart

Text als Bild

ausgegeben werden sollen und sIFR wandelt die definierten Texte beim Laden der Seite in ein Flash/SWF

Eine naheliegende und einfach umsetzbare Technik

Objekt um. In diesem Flash Objekt kann die Schrift-

ist die Abspeicherung von Texten mit Sonder-

art gespeichert und für die Darstellung des Textes

schriften als Bilder. Die Bilder werden dann anstatt

herangezogen werden, ohne das der Betrachter

eines Textes in der Webseite eingebunden und für

diese installiert haben muss.

den Betrachter richtig dargestellt. Damit sIFR ordentlich funktioniert, müssen zwei Diese Variante bringt allerdings wesentliche Nachteile

Voraussetzungen am Gerät des Betrachters erfüllt

mit sich. „Da bei dieser Methode jedes Zeichen, egal

sein: einerseits muss das Flash PlugIn im Browser

wie häufig es vorkommt, Pixel für Pixel errechnet und

installiert sein, was bei aktuellen Browsern inzwi-

in der Bitmap abgelegt werden muss, ergibt sich ein

schen standardmäßig mitgeliefert wird. Andererseits

höherer Bedarf an Speicherplatz als bei skalierbaren

muss JavaScript beim Betrachter aktiviert sein.

Screenfonts.“ (Kiehn; Titzmann 1998, S. 31)

Diese Einschränkung tritt vorrangig bei Computern in

Weiters können Bilder von Suchmaschinen nicht

Unternehmen auf, da mit JavaScript verschiedens-

gelesen werden, was bei der großzügigen Anwen-

te Aktionen ausgeführt werden können, was unter

dung dieser Technik zu Wettbewerbsnachteilen

Umständen als Risiko angesehen werden kann. Trifft

führen kann.

eine der beiden Voraussetzungen nicht zu (beispiels-

Scalable Inman Flash Replacement Eine andere, etwas fortgeschrittenere Möglichkeit, die den Nachteil bei Suchmaschinen ausmerzt, ist das scalable Inman Flash Replacemen (sIFR).

Schriften im Web

weise wenn die Seite von einem blinden Besucher mittels Screenreader konsumiert wird), wird die Technologie ignoriert und die Webseite in den zur Verfügung stehenden Systemschriften ausgegeben.

4


Dieses Vorgehen ist sowohl für die Accessibility als

arten zur korrekten Darstellungen vom Server zu

auch für die Suchmaschinenoptimierung sehr wich-

laden und zu verwenden.

tig, da der Inhalt unter allen Bedingungen vollständig zur Verfügung steht.

Bereits Internet Explorer 4 unterstütze die @font-face Klasse, setzte allerdings das von Microsoft selbst

Zu erwähnen wäre hier noch, dass die Umwandlung

definierte Schriftformat EOT (embedded Opentype)

der Texte in die gewünschte Schriftart ein zusätzli-

voraus. Dieses ist nicht öffentlich und somit dem

cher Prozess beim Aufrufen der Webseite darstellt

Internet Explorer von Microsoft vorbehalten.

(vergleichbar mit dem Laden von Bildern) und dies

Da das EOT Format daher von anderen Browsern

zusätzliche Ladezeit in Anspruch nimmt. Um den

nicht verwendet werden kann (Texte würden nicht

Besucher nicht unnötigen langen Ladezeiten aus-

in der EOT Schrift, sondern in der Standard Stys-

zusetzen, sollte diese Technik also nur mit Bedacht

temschrift ausgegeben werden), war diese Methode

(zum Beispiel für Überschriften) verwendet werden

für Webdesigner abschreckend (vgl. PUBLISHING

(vgl. Davidson 2005).

PRAXIS 2009, S. 47).

Einbindung von Schriften über CSS: . @font-face Auch CSS (Cascading Style Sheets) hält eine Lösung für dieses Problem bereit. Mit CSS Definitionen wird im Webdesign festgelegt, wie einzelne Bereiche einer Webseite dargestellt werden sollen. Eine theoretische Lösung über CSS liegt bereits seit der Einführung von CSS 2 (vgl. Bos u.a. 1998) im Jahre 1998 vor. In diesem vom World Wide Web Consortium (kurz W3C, das Gremium zur Standardisierung von den das World Wide Web betreffenden Techniken, www.w3c.org) definierten Standard wurde erstmals die @font-face Klasse eingeführt, mit dem der Browser angewiesen werden kann, spezielle SchriftSchriften im Web

5


Safari bringt neuen Schwung in die Diskussion Nachdem Apple Anfang 2008 mit der Veröffentlichung von Safari 3.1, welcher die @font-face Klasse als erster Browser neben dem Internet Explorer unterstützt (vgl. Apple 2008), die Diskussion neu belebt hatte, unterstützen mittlerweile alle gängigen Browser die @font-face Klasse (vgl. Webfonts 2009). Der Unterschied zum Microsoft Internet Explorer liegt allerdings darin, dass Browser wie Firefox (Mozilla) und Safari (Apple) beim Einsatz der Klasse keine Schriftdateien im EOT Format, sondern in den weit verbreiteten Schriftformaten TrueType oder OpenType erwarten. Dieser Einsatz von TrueType bzw. OpenType Schriften ist besonders den Schriftenhäusern ein Dorn im Auge, da die Verwendung der Schriftdateien „ungeschützt“ erfolgt. Denn bei dieser Methode werden die Schriftdateien auf dem Anzeigegerät des Betrachters gespeichert und könnten von diesem, meist illegal, weiterverwendet und verbreitet werden (vgl. PUBLISHING PRAXIS 2009, S. 47).

Schriften im Web

6


Neue Ansätze zur Problemlösung Neue Lizenzen für Schriften am Beispiel .

Font Replacement über einen Drittanbieter .

Axel von Fontshop.de

am Beispiel Typekit

Klassische Endnutzer-Lizenzverträge, die beim Kauf

Seit November 2009 steht Webdesignern mit Typekit

von Schriften in Kraft treten, verbieten die weitere

eine weitere Alternative zur Verfügung, spezielle

Verbreitung der gekauften Schrift. Dies bedeutet

Schriftarten über ein Abonnementmodell in ihrer

unter anderem, dass diese Schriften auch nicht mit

Gestaltung zu verwenden. Typekit ist sich des recht-

der Klasse @font-face in Webseiten eingebunden

lichen Aspekts beim Einbetten von Schriften über

werden dürfen.

die @font-face Klasse bewusst und setzt hier an.

FontShop, das weltweit größte herstellerunabhängige Versandhaus für Schriften und Bilder, macht mit der im Mai 2009 veröffentlichten Schriftart „Axel“ einen ersten Schritt zur Lösung des Problems. „Axel“ wird mit einer erweiterten Lizenzvereinbarung

Das Modell bietet, in Zusammenarbeit mit Schriftenhäusern wie beispielsweise FontFont (Fontshop), eine „web-only Font linking license“ an. Eine Lizenz, die speziell für die Verknüpfung von Webseiten mit Schriftdateien eingeführt wurde (vgl. Typekit 2009).

ausgeliefert, welche zwar die weitere Verbreitung

Bei diesem Modell werden die Schriftarten nur von

der Schrift verbietet, die Einbettung der Schrift in

Typekit selbst gespeichert (was eine unrechtmäßige

Webseiten aber explizit erlaubt. Dies wird übrigens

Verbreitung von Schriften verhindert) und von dort

auch auf dem hauseigenen Blog „fontblog.de“ bei

über JavaScript an den Browser geliefert. Außer-

den Überschriften praktiziert (vgl. Siebert 2009 und

dem kümmert sich Typekit um die unterschiedlichen

Fontshop 2009).

browserspezifischen Eigenschaften beim Einbetten

Andere Anbieter mit ähnlichen Lizenzmodellen wären

der Schriften (vgl. Typekit 2009).

zum Beispiel „Typotheque“ (typotheque.com) oder

Als Anbieter mit ähnlichen Leistungen wäre hier Font-

„Font Squirrel“ (fontsquirrel.com), die sich auf den

deck (derzeit noch in der Testphase, fontdeck.com)

Vertrieb von kostenlosen Schriftarten mit Lizenzen für

und Kernest (kernest.com) zu nennen.

die kommerzielle Nutzung spezialisiert haben.

Schriften im Web

7


Web Open Font Format Der Browser Firefox unterstützt ab der aktuellen Ver-

Zum anderen beinhaltet das Format zusätzliche

sion 3.6 das Web Open Font Format (WOFF). Dieses

Informationen der Schriftenhäuser. Dies könnten zum

basiert auf dem .webfont Entwurf, den Tal Leming

Beispiel Informationen über Urheberrecht, die Weiter-

und Erik van Blokland im September 2009 (bereits in

verwendung oder Erwerbsmöglichkeiten sein.

der zweiten Version) vorlegten.

Zu beachten ist jedoch, dass die originalen TrueType

Dieser Entwurf sah vor, den Schrifthäusern ein neues

oder OpenType Schriftdaten durch die Neuver-

und einfaches Schriftenformat zur Verfügung zu

packung nicht zusätzlich verschlüsselt werden

stellen, in dem die Schriftdateien mit zusätzlichen

(vgl. Blizzard 2009). Das beudeutet, dass die

Informationen (wie zum Beispiel Urheber, Lizenz,

Schriften nicht vor einer unrechtmäßigen Verwen-

Copyright, etc.) zusammen komprimiert und ein-

dung oder Verbreitung geschützt sind.

gebettet werden können. Die so entstehende Datei sollte als ZIP Archiv in die Webseiten eingebettet werden, womit eine Reduzierung der Dateigröße um ca. 40% erreicht werden könnte (vgl. Leming 2009).

Ob sich das Web Open Font Format durchsetzen und sich so als Standardformat für Schriften im Web etablieren kann, hängt einerseits von den unterschiedlichen Browserherstellern (vorrangig Microsoft

Das Web Open Font Format ist nun das Ergebnis der

und Apple) sowie von Schriftenhäusern ab. Die

Zusammenarbeit zwischen den Schriftgestaltern und

Chancen stehen aber durch die bereits angekündigte

Jonathan Kew, Entwickler bei Mozilla (Firefox).

Unterstützung von vielen Schriftenhäusern (unter

WOFF vereint so die Vorstellungen beider Parteien in

anderem Emigre, FontShop, Linotype, Monotype,

einem Format (vgl. Herrmann 2010, S. 27).

etc.) relativ gut (vgl. Shapiro 2009).

Schriften im WOFF sind im Prinzip nur anders verpackte OpenType oder TrueType Schriftdaten. Diese Neuverpackung bietet allerdings einige Vorteile gegenüber rohen Standardformaten. Zum einen sind Schriften im WOFF verlustfrei komprimiert und verringern so die Ladezeiten auf Webseiten bei gleichbleibender Qualität. Schriften im Web

8


Fazit

Trotz der intensiven Beschäftigung mit dem Thema durch Browserhersteller, Schriftenhäuser und Designer wurde die perfekte Lösung noch nicht gefunden. Die Fortschritte der letzten Monate (im Besonderen mit der Implementierung des WOFF) werden den Einsatz von unterschiedlichen Schriften im Web jedoch schon um einiges erleichtern. In unserem Semesterprojekt, einer Webseite für das Radiomuseum Lustenau, spielte die Frage nach der passenden Einbindung der DIN zu Beginn eine wichtige Rolle. Die Umsetzung der meisten Funktionen forderten jedoch die komplette Umsetzung in Flash. Da Flash die verwendeten Schriften in die publizierte Datei einbetten kann (diese Technik verwendet auch die bereits beschriebene sIFR Technik), hat sich die Frage nach der Schrifteinbettung für dieses Projekt allerdings erübrigt.

Schriften im Web

9


Text als Bild

sIFR

CSS @font-face

10

Font Replacement Service

WOFF


Links

Font Replacement über Webservices

Weitere Informationen zur Vertiefung:

Typekit: http://typekit.com/

Die @font-face Klasse: http://www.w3.org/TR/2008/

Fontdeck (derzeit noch in einer Testphase): http:// fontdeck.com/ Kernest: http://kernest.com/

REC-CSS2-20080411/fonts.html#font-descriptions Das WOFF Datei Format: http://people.mozilla. com/~jkew/woff/woff-spec-latest.html CSS 3: http://www.w3.org/TR/2009/WD-css3fonts-20090618/

@font-face Lizenzen:

Die W3C www-font Mailing Liste: http://lists.w3.org/

Font Squirrel: http://www.fontsquirrel.com/

Archives/Public/www-font/

Typotheque: http://www.typotheque.com/licensing/

Nice Web Type: http://nicewebtype.com/

twfs_license A List Apart – Typografie Artikel: http://www.alistaFontshop: http://www.fontshop.com/help/licenses/

part.com/topics/design/typography/

fontshop_ag/

Schriften im Web

11


Literaturverzeichnis

Apple (2008): „Informationen zum Safari 3.1 Up-

Kiehn Anja; Titzmann Ina (1998): Typographie inter-

date“. Online im Internet: http://support.apple.com/

aktiv! Ein Leitfaden für gelungenes Screen-Design.

kb/TA25197?viewlocale=de_DE (Zugriff am: 05. 12.

Berlin; Heidelberg; New York; Barcelona; Budapest;

2009).

Hongkong; London; Mailand; Paris; Santa Clara;

Blizzard, Christopher (2009): „Web Open Font Format for Firefox 3.6“. Online im Internet: http://hacks. mozilla.org/2009/10/woff/ (Zugriff am: 14. 12. 2009). Bos Bert; Jacobs Ian; Lie Håkon Wium; Lilley Chris (1998): „Cascading Style Sheets, level 2. CSS2 Specification“. Online im Internet: http://www.w3.org/

Singapur; Tokio: Springer (Edition PAGE), S. 31. Leming, Tal (2009): „.webfont Proposal 2“. Online im Internet: http://lists.w3.org/Archives/Public/wwwfont/2009JulSep/0440.html (Zugriff am: 05. 12. 2009).

TR/2008/REC-CSS2-20080411/ (Zugriff am: 05. 12.

Mike Davidson (2005): „sIFR 2.0: Rich Accessible

2009).

Typography for the Masses“. Online im Internet:

Fontshop (2009): „End User License Agreements (EULAs). FontShop AG License Agreement, Simple

http://www.mikeindustries.com/blog/sifr/ (Zugriff am: 05. 12. 2009).

Rules for Using Axel“. Online im Internet: http://www.

PUBLISHING PRAXIS (2009): „Beliebige Schriften

fontshop.com/help/licenses/fontshop_ag/ (Zugriff

auf Webseiten verwenden“. In PUBLISHING PRAXIS,

am: 05. 12. 2009).

Nr. 9-10, 2009, S. 47.

Herrmann, Ralf (2010): „Typografie. Mehr Schriften

Santa Maria, Jason (2009): „On Web Typography“.

für Web“. In: PAGE. Ideen und Know-how für Design,

Online im Internet: http://www.alistapart.com/artic-

Werbung, Medien, Nr. 1, 2010, S. 27.

les/on-web-typography/ (Zugriff am: 29. 01. 2010).

Schriften im Web

12


Shapiro, Melissa (2009): „Mozilla Supports Web Open Font Format“. Online im Internet: http://blog. mozilla.com/blog/2009/10/20/mozilla-supports-webopen-font-format/ (Zugriff am: 14. 12. 2009). Siebert, Jürgen (2009): „Axel, die neue Spiekermann“. Online im Internet: http://www.fontblog.de/ hier-ist-axel (Zugriff am: 05. 12. 2009). Typekit (2009): „About Typekit“. Online im Internet: http://typekit.com/about (Zugriff am: 05. 12. 2009). Webfonts (2009): „@font-face browser support“. Online im Internet: http://webfonts.info/wiki/index. php?title=%40font-face_browser_support (Zugriff am: 05. 12. 2009).

Schriften im Web

13

Einbettung von Schriften im Web  

Status Quo der Methoden zur Einbettung von Sonderschriften im Web.