Webfonts

Bezeichnung für auf Hyper Text Markup Language (HTML/XHTML) basierende Fonts, deren typometrische Klassifikationsmerkmale von Webbrowsern (Softwareprogramme zur Darstellung von Webseiten, z.B. Internet Explorer®, Safari®, Google Chrome® oder Firefox®) – unabhängig vom verwendeten Betriebssystem – mehr oder weniger schriftstilnah interpretiert werden können. 1 )

Etymologisch aus dem Englischen »Web« als Abkürzung für »World Wide Web« für »Weltweites Netz« also »Netz« und engl. »Font« für »Schrift, Zeichensatz«; Web Fonts; Netzschriften.

Webfonts sind primär für den Einsatz in (X)HTML-Webseiten bzw. für browserbasierte digitale Texte vorgesehen; sie werden in der Regel beim Aufruf einer Webseite nicht aus der lokalen Schriftensammlung (siehe Systemschriften) eines Computers (z.B. PC, Tablet, Smartphone), sondern von einem externen Webserver in den Browser (Client) eingeladen. 

Bezugsquellen

Bezugsquellen für Webfonts 2 ) sind Font Foundries (z.B. Adobe), Schriftportale (z.B. Google Fonts) oder Schriftgestalter (z.B. Lucas Fonts), die diese online vertreiben (Auswahl siehe Font Foundry). 

Lizenzen und Kosten

Webfonts werden sowohl als kosten- und nutzungsfreie 3 ) wie auch als kosten- und lizenzpflichtige Fonts 13 ) im Internet vertrieben. Kosten und Lizenzbestimmungen differieren je nach Anbieter und/oder Land, welche sich von Gratis-, Sonder-, Kombi- oder Pauschalangeboten, Abrechnung nach Pageviews 4 ) bis hin zu Abonnementmodellen 5 ) erstrecken.

Formate 

Seit der Einführung der »@font-face-Regel« ab CSS2 14 ) können rein technisch betrachtet, alle Schriften in Websites eingebettet werden 15 ) 

Webfonts werden in unterschiedlichen Dateiformaten angeboten:

  • EOT (Embedded Open Type) 6 )
  • OT (OpenType Format) 7 )
  • RTT (Raw TrueType)
  • SVG (Scalable Vector Graphics)
  • TTF (TrueType Font)
  • WOFF (Web Open Font Format) 8 )
Font Hinting

Die Darstellungsqualität eines Webfonts in einem Browser (Client) wird weniger vom Dateiformat des Fonts bestimmt, sondern insbesondere von der Qualität des »Hinting«. 16 ) Deshalb ist die Qualität des Font Hintings ein wesentliches Kriterium bei der Wahl eines Webfonts (siehe auch Schriftwahl).

Browser

Webfonts werden (Stand Januar 2015) von folgenden Browsern unterstützt:

  • Apple® Webkit/Safari® ab Version 3.1
  • Microsoft® Internet Explorer® ab Version 4
  • Google Chrome® ab Version 4.0
  • Mobile Safari® in allen Versionen (für iPhone®, iPad®, iPod®)
  • Mozilla® Firefox® ab Version 3.5
  • Opera® ab Version 10.10
Einbettung

Webfonts können sowohl auf eigenen wie auch auf fremden Servern (Hosting) hinterlegt werden. Das Einbinden eines Webfonts erfolgt in der Regel über die »@font-face-Regel« im »CSS Cascading Style Sheets« 9 ) einer Webseite.

Beispiel einer einfachen Webfonteinbettung:

@font-face {
font-family: 'musterschrift_regular';
src: url('musterschrift-xy.eot');
src: url('musterschrift-xy.eot?#iefix') 
format('embedded-opentype'),
url('musterschrift-xy.woff') 
format('woff'),
url('musterschrift-xy.ttf') 
format('truetype');
font-weight: normal;
font-style: normal; 
}

Des Weiteren können Webfonts auch über Javascript®, ein API Application Programming Interface (Schnittstelle zur Anwendungsprogrammierung) oder spezielle Softwaremodule (Softwareplugins) 10 ) eingebunden werden.

Schriftschnitte

Webfonts gibt es sowohl als einzelne Schriftschnitte wie auch als komplette Schriftfamilien. 11 ) Bei der Einbindung in Websites weichen allerdings in der Webtypographie oft gängige Termini von denen der klassischen Schriftklassifikation ab. Beispielsweise können einzelne Schriftschnitte mit numerischen Codes aus der digitalen Schriftgestaltung (z.B. font-style: 400; = normal/regular/roman) in ein »CSS Cascading Style Sheets« 12 ) eingebunden werden:

Numerischer Code / CSSBezeichnungSchriftschnitt
100ThinUltra leicht
200Extra LightExtra leicht
300LightLeicht
400NormaleNormal
500MediumLeichthalbfett
600Semi BoldHalbfett
700BoldFett
800Extra BoldExtrafett
900Ultra BoldUltrafett
Druck

Webfonts sind keine PostScript®-Schriften. D.h., sie sind nicht für die professionelle Druckvorstufe (z.B. im Offsetdruck) geeignet. Selbst bei Ausdrucken auf simplen Bürodruckern (z.B. Laserdrucker) kann es zu markanten Abweichungen vom Originalschriftbild kommen. 

© Wolfgang Beinert, www.typolexikon.de

Teilen

Quellen / Literatur / Anmerkungen / Informationen / Tipps   [ + ]

1. Anmerkung: Die Darstellung eines Webfonts auf unterschiedlichen PCs und unterschiedlichen Ausgabegeräten weicht in der Regel grundlegend je nach verwendeter Hardware, Betriebssystem, Browser, Browserversion, Grundeinstellungen des Browsers, Bildschirmqualität, Bildschirmauflösung, Anti-Aliasing, Grafikkarte, etc. spürbar voneinander ab. Von einer einheitlichen Darstellung im Sinne der Mikrotypographie kann zurzeit noch nicht gesprochen werden.
2. Anmerkung: Mehrheitlich werden sogenannte »Webfonts« zur Nutzung angeboten, die leider nichts anderes als Druckschriften und eben keine im Sinne der Lesetypographie für den Bildschirm entwickelten Screen Fonts sind. Viele Font Foundries versuchen so, ihren digital vorhandenen Druckschriftenbestand bestenfalls als »optimierte« Webfonts zu verkaufen.
3. Anmerkung: Im Internet gibt es viele lizenzfreie Angebote, beispielsweise Google Fonts (www.google.com/fonts) mit derzeit rund 650 Webfonts oder Font Squirrel (www.fontsquirrel.com). Diese Fonts sind gestalterisch nicht unbedingt schlechter oder besser als lizenzgebundene Schriften.
4. Anmerkung: Die Pageviews (Seitenzugriffe) werden in der Regel mittels Tracking gezählt. D.h., der Schriftverkäufer hat somit immer Zugriff auf Ihre vertraulichen Webanalysedaten.
5. Anmerkung: Bei der Schriftwahl ist die auch die Evaluierung des Lizenzmodells wichtig. Denn welche Gefahren drohen – insbesondere bei Abomodellen – bei Insolvenz oder Einstellung des Webfontdienstes? (z.B. WebINK, der ab Juni 2015 seinen Dienst einstellt und dadurch erhebliche Kosten bei Agenturen und Firmen verursacht. (Quelle: Pressemitteilung Dr. Web: Webfonts adé: Typekit-Konkurrent WebINK gibt auf, 17.2.2015). Wie schnell sind die Server? Wie gut ist die Anbindung an das Web?
6. Anmerkung: Das EOT-Format braucht man eigentlich nur noch, wenn man den Internet Explorer vor Version 9 unterstützen möchte.
7. Anmerkung: Fast alle Browser unterstützen heute OpenType. Somit können auch OT-Features wie Ligaturen oder Sonderzeichen per CSS-Befehl implementiert werden.
8. Anmerkung: Zur Sicherung von Lizenzrechten der im Internet genutzten Schriften wurde 2009 das Web Open Font Format (WOFF) geschaffen. Es unterscheidet sich nur gering von einem Open Type File. Eine WOFF-Datei ist nichts anderes als ein ZIP-Archiv, das XML-Metainformationen über Lizenz und Hersteller sowie den RawFont enthält. Entwickelt wurde dieses Format von Erik van Blokland, Tal Leming und Jonathan Kew. WOFF gilt als offizieller W3C-Standard, der zurzeit vom neuen Kompressionsverfahren »Brotli« (WOFF 2.0) ersetzt werden wird. Der »Brotli«-Algorithmus wurde von Google ® entwickelt und verspricht eine Größenreduzierung der Schriftdateien von bis zu 50 Prozent gegenüber WOFF 1.0.
9, 12, 14. Anmerkung: CSS Cascading Style Sheets ist ein weltweiter Standard des W3C (World Wide Web Consortium).
10. Beispiel: Das Wordpress Google Fonts Plugin von Adrian Hanft und Aaron Brown. in eine Website.
11. Anmerkung: Der Zeichenvorrat eines Webfonts kann merklich von dem einer gleichnamigen Druckschrift abweichen. Insbesondere kostenlose oder von Amateuren gefertigte Webfonts weisen hier markante Defizite auf.
13. Hinweis: Urheberrecht für Schriften und Mythos »Schriftsoftware«. Eine kritische Anmerkung von Wolfgang Beinert.
15. Anmerkung: Webfonts sind Vektorgrafiken, die vom jeweiligen Client in eine Pixelmatrix umgewandelt werden, um so den Font in einem Webbrowser darstellen zu können. Generell ist also nicht das Schriftformat, wie TrueType (TTF), OpenType (OT), SVG oder PostScript® ausschlaggebend, sondern das Hinting, welches die Darstellungsqualität der Schrift im Browser optimiert.
16. Anmerkung: Bei vielen kostenlosen Webfonts wird meist auf das Hinting verzichtet, was die Buchstaben unscharf erscheinen lässt.