Theorie zu Interdisziplinäre Medienproduktion 2

Interaktive Medien, FH Vorarlberg, WS 2009/2010

Flachsmann Christof

Dozent: Matt Hubert

29. Jänner 2010

Schriften im Web

1 Schriften im Web

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

2 Schriften im Web

Ob kleines Ein-Mann Unternehmen oder interna-

tionaler 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 ver-

wenden. Diesem Anspruch aber auch auf Webseiten

gerecht zu werden, verursacht jedoch immer

noch Probleme.

„2009 gab IKEA die Futura - ihr typografisches Mar-

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

Einleitung

3 Schriften im Web

Bei einem klassischen Gestaltungsprodukt, wie

beispielsweise einer Visitenkarte, hat der Gestalter

die Möglichkeit, das Ergebnis seiner Arbeit genau zu

kontrollieren. Er kann beispielsweise Layout, Papier,

Größe, Farbe oder Schriftart exakt bestimmen und

eventuelle Abweichungen bei der Produktion des

Produktes korrigieren (lassen). Der Gestalter hat die

volle Kontrolle, wie das Endprodukt beim

Konsument ankommt.

Vergleicht man das mit der Gestaltung einer Web-

seite, so gleicht dies angesichts der vielen un-

kontrollierbaren Faktoren einem gestalterischen

Blindflug. Denn wie eine Webseite beim Betrachter

dargestellt wird entscheidet nur zum Teil der Gestal-

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

chen Anteil machen Einstellungen beim Anzeigegerät

des Betrachters aus, wie zum Beispiel der verwen-

dete Browser, das Betriebssystem, die eingestellte

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

nur eine Handvoll der Faktoren zu nennen.

Der.Gestalter.definiert.mit.der.Publizierung.

einer.Webseite.also.lediglich.ein.Soll-Ergebnis..

Schriften sind ein wesentlicher Bestandteil eines

Gestaltungsprodukts. Wie ein Text auf einer Web-

seite dargestellt werden soll, wird im Allgemeinen

durch die Definition von Schriftart und -schnitt,

Größe und Farbe sowie Laufweite und Zeilen-

abstand vom Gestalter festgelegt. Voraussetzung für

eine korrekte Darstellung ist (unter anderem) jedoch,

dass die definierte Schriftart am Rechner des Be-

trachters installiert ist. Denn die Schriftdatei, die dem

Ausgabegerät genau vorschreibt, wie ein Buchstabe

auszusehen hat, ist im Normalfall nicht Bestandteil

der Webseite.

Ist eine Schriftart auf dem Anzeigegerät des Be-

suchers also nicht installiert, ist die Ausgabe des

Textes nicht ohne zusätzliche Maßnahmen in der

gewünschten Form möglich.

Die installierten (und somit zur Verfügung stehenden)

Schriftarten beschränken sich beim Großteil der

Anwender auf die vom Betriebssystem mitgelieferten

Schriften. Denn mit dem Kauf eines Betriebssystems

erwirbt der Käufer gleichzeitig die Nutzungsrechte an

enthaltenen Schriften, so genannten Systemschriften.

Diese sind von Betriebssystem zu Betriebsystem

(sogar von Version zu Version) unterschiedlich.

Zusätzliche Schriften müssen von jedem Benutzer

gesondert gekauft werden.

„Fragen des Dateiformats und vor allem lizenzrecht-

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

dass von individuellen Schriften im Web bis heute

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

S. 47)

Das Problem:Schriften im Web

4 Schriften im Web

Dieses Problem schränkt die Möglichkeiten bei der

Gestaltung von Webseiten stark ein. Bereits seit über

10 Jahren beschäftigen sich Programmierer und

Webdesigner deshalb mit dieser Thematik.

Erste Möglichkeiten, das Problem zu umgehen,

waren schnell gefunden:

Text.als.Bild

Eine naheliegende und einfach umsetzbare Technik

ist die Abspeicherung von Texten mit Sonder-

schriften als Bilder. Die Bilder werden dann anstatt

eines Textes in der Webseite eingebunden und für

den Betrachter richtig dargestellt.

Diese Variante bringt allerdings wesentliche Nachteile

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

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

in der Bitmap abgelegt werden muss, ergibt sich ein

höherer Bedarf an Speicherplatz als bei skalierbaren

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

Weiters können Bilder von Suchmaschinen nicht

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

dung dieser Technik zu Wettbewerbsnachteilen

führen kann.

Scalable.Inman.Flash.Replacement.

Eine andere, etwas fortgeschrittenere Möglichkeit,

die den Nachteil bei Suchmaschinen ausmerzt, ist

das scalable Inman Flash Replacemen (sIFR).

sIFR wurde von Mike Davidson und Mark Wubben

entwickelt, um kurze Textpassagen in einer bestimm-

ten Schriftart auszugeben. sIFR benutzt JavaScript,

CSS und Flash um zu dem gewünschten Ergebnis

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

die mit dieser Methode in einer speziellen Schriftart

ausgegeben werden sollen und sIFR wandelt die de-

finierten Texte beim Laden der Seite in ein Flash/SWF

Objekt um. In diesem Flash Objekt kann die Schrift-

art gespeichert und für die Darstellung des Textes

herangezogen werden, ohne das der Betrachter

diese installiert haben muss.

Damit sIFR ordentlich funktioniert, müssen zwei

Voraussetzungen am Gerät des Betrachters erfüllt

sein: einerseits muss das Flash PlugIn im Browser

installiert sein, was bei aktuellen Browsern inzwi-

schen standardmäßig mitgeliefert wird. Andererseits

muss JavaScript beim Betrachter aktiviert sein.

Diese Einschränkung tritt vorrangig bei Computern in

Unternehmen auf, da mit JavaScript verschiedens-

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

Umständen als Risiko angesehen werden kann. Trifft

eine der beiden Voraussetzungen nicht zu (beispiels-

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.

Bewährte Lösungs-ansätze

5 Schriften im Web

Dieses Vorgehen ist sowohl für die Accessibility als

auch für die Suchmaschinenoptimierung sehr wich-

tig, da der Inhalt unter allen Bedingungen vollständig

zur Verfügung steht.

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

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

cher Prozess beim Aufrufen der Webseite darstellt

(vergleichbar mit dem Laden von Bildern) und dies

zusätzliche Ladezeit in Anspruch nimmt. Um den

Besucher nicht unnötigen langen Ladezeiten aus-

zusetzen, sollte diese Technik also nur mit Bedacht

(zum Beispiel für Überschriften) verwendet werden

(vgl. Davidson 2005).

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 Schrift-

arten zur korrekten Darstellungen vom Server zu

laden und zu verwenden.

Bereits Internet Explorer 4 unterstütze die @font-face

Klasse, setzte allerdings das von Microsoft selbst

definierte Schriftformat EOT (embedded Opentype)

voraus. Dieses ist nicht öffentlich und somit dem

Internet Explorer von Microsoft vorbehalten.

Da das EOT Format daher von anderen Browsern

nicht verwendet werden kann (Texte würden nicht

in der EOT Schrift, sondern in der Standard Stys-

temschrift ausgegeben werden), war diese Methode

für Webdesigner abschreckend (vgl. PUBLISHING

PRAXIS 2009, S. 47).

6 Schriften im Web

Nachdem Apple Anfang 2008 mit der Veröffentli-

chung 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 Schrif-

ten ist besonders den Schriftenhäusern ein Dorn im

Auge, da die Verwendung der Schriftdateien „unge-

schü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. PUBLI-

SHING PRAXIS 2009, S. 47).

Safari bringt neuen Schwung in die Diskussion

7 Schriften im Web

Neue.Lizenzen.für.Schriften.am.Beispiel..

Axel.von.Fontshop.de

Klassische Endnutzer-Lizenzverträge, die beim Kauf

von Schriften in Kraft treten, verbieten die weitere

Verbreitung der gekauften Schrift. Dies bedeutet

unter anderem, dass diese Schriften auch nicht mit

der Klasse @font-face in Webseiten eingebunden

werden dürfen.

FontShop, das weltweit größte herstellerunabhän-

gige 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

ausgeliefert, welche zwar die weitere Verbreitung

der Schrift verbietet, die Einbettung der Schrift in

Webseiten aber explizit erlaubt. Dies wird übrigens

auch auf dem hauseigenen Blog „fontblog.de“ bei

den Überschriften praktiziert (vgl. Siebert 2009 und

Fontshop 2009).

Andere Anbieter mit ähnlichen Lizenzmodellen wären

zum Beispiel „Typotheque“ (typotheque.com) oder

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

Vertrieb von kostenlosen Schriftarten mit Lizenzen für

die kommerzielle Nutzung spezialisiert haben.

Font.Replacement.über.einen.Drittanbieter..

am.Beispiel.Typekit

Seit November 2009 steht Webdesignern mit Typekit

eine weitere Alternative zur Verfügung, spezielle

Schriftarten über ein Abonnementmodell in ihrer

Gestaltung zu verwenden. Typekit ist sich des recht-

lichen Aspekts beim Einbetten von Schriften über

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

Das Modell bietet, in Zusammenarbeit mit Schrif-

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

Bei diesem Modell werden die Schriftarten nur von

Typekit selbst gespeichert (was eine unrechtmäßige

Verbreitung von Schriften verhindert) und von dort

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

dem kümmert sich Typekit um die unterschiedlichen

browserspezifischen Eigenschaften beim Einbetten

der Schriften (vgl. Typekit 2009).

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

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

und Kernest (kernest.com) zu nennen.

Neue Ansätze zur Problemlösung

8 Schriften im Web

Web.Open.Font.Format.

Der Browser Firefox unterstützt ab der aktuellen Ver-

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

basiert auf dem .webfont Entwurf, den Tal Leming

und Erik van Blokland im September 2009 (bereits in

der zweiten Version) vorlegten.

Dieser Entwurf sah vor, den Schrifthäusern ein neues

und einfaches Schriftenformat zur Verfügung zu

stellen, in dem die Schriftdateien mit zusätzlichen

Informationen (wie zum Beispiel Urheber, Lizenz,

Copyright, etc.) zusammen komprimiert und ein-

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

Das Web Open Font Format ist nun das Ergebnis der

Zusammenarbeit zwischen den Schriftgestaltern und

Jonathan Kew, Entwickler bei Mozilla (Firefox).

WOFF vereint so die Vorstellungen beider Parteien in

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

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 ver-

ringern so die Ladezeiten auf Webseiten bei gleich-

bleibender Qualität.

Zum anderen beinhaltet das Format zusätzliche

Informationen der Schriftenhäuser. Dies könnten zum

Beispiel Informationen über Urheberrecht, die Weiter-

verwendung oder Erwerbsmöglichkeiten sein.

Zu beachten ist jedoch, dass die originalen TrueType

oder OpenType Schriftdaten durch die Neuver-

packung nicht zusätzlich verschlüsselt werden

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

Schriften nicht vor einer unrechtmäßigen Verwen-

dung oder Verbreitung geschützt sind.

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 unter-

schiedlichen Browserherstellern (vorrangig Microsoft

und Apple) sowie von Schriftenhäusern ab. Die

Chancen stehen aber durch die bereits angekündigte

Unterstützung von vielen Schriftenhäusern (unter

anderem Emigre, FontShop, Linotype, Monotype,

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

9 Schriften im Web

Trotz der intensiven Beschäftigung mit dem Thema

durch Browserhersteller, Schriftenhäuser und Desig-

ner 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 wich-

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

Fazit

Text als Bild sIFR CSS @font-face Font Replacement Service

WOFF

10

11 Schriften im Web

Font.Replacement..über.Webservices

Typekit: http://typekit.com/

Fontdeck (derzeit noch in einer Testphase): http://

fontdeck.com/

Kernest: http://kernest.com/

@font-face.Lizenzen:.

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

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

twfs_license

Fontshop: http://www.fontshop.com/help/licenses/

fontshop_ag/

Weitere.Informationen.zur.Vertiefung:

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

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-css3-

fonts-20090618/

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

Archives/Public/www-font/

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

A List Apart – Typografie Artikel: http://www.alista-

part.com/topics/design/typography/

Links

12 Schriften im Web

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

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

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

2009).

Blizzard, Christopher (2009): „Web Open Font For-

mat 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 Spe-

cification“. Online im Internet: http://www.w3.org/

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

2009).

Fontshop (2009): „End User License Agreements

(EULAs). FontShop AG License Agreement, Simple

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

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

am: 05. 12. 2009).

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

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

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

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

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

Berlin; Heidelberg; New York; Barcelona; Budapest;

Hongkong; London; Mailand; Paris; Santa Clara;

Singapur; Tokio: Springer (Edition PAGE),

S. 31.

Leming, Tal (2009): „.webfont Proposal 2“. Online im

Internet: http://lists.w3.org/Archives/Public/www-

font/2009JulSep/0440.html (Zugriff am: 05. 12.

2009).

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

Typography for the Masses“. Online im Internet:

http://www.mikeindustries.com/blog/sifr/ (Zugriff am:

05. 12. 2009).

PUBLISHING PRAXIS (2009): „Beliebige Schriften

auf Webseiten verwenden“. In PUBLISHING PRAXIS,

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

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

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

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

Literaturverzeichnis

13 Schriften im Web

Shapiro, Melissa (2009): „Mozilla Supports Web

Open Font Format“. Online im Internet: http://blog.

mozilla.com/blog/2009/10/20/mozilla-supports-web-

open-font-format/ (Zugriff am: 14. 12. 2009).

Siebert, Jürgen (2009): „Axel, die neue Spieker-

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