Date post: | 02-Mar-2016 |
Category: |
Documents |
Upload: | christof-f |
View: | 221 times |
Download: | 0 times |
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).