Webtypografie

In den Anfängen von HTML wurden die Schriftarten und Schriftstile ausschließlich durch die jeweiligen Einstellungen der Webbrowser bestimmt. Es gab keine Möglichkeit, die auf einer Website angezeigten Schriften zu beeinflussen, bis Netscape 1995 das inzwischen veraltete <font>-Tag einführte, das dann in der HTML-2-Spezifikation als Standard festgelegt wurde.

Die definierte Schriftart musste allerdings auf dem Benutzerrechner installiert sein. Ansonsten wurde ein „Fallback-Font“, wie z. B. der im Browser eingestellte Standard-Sans-Serif oder Monospace-Font verwendet. Dieser Umstand prägte den Begriff „websichere“ Schriften (Core fonts for the Web) wie beispielsweise Times New Roman, Verdana oder Arial, weil diese auf den meisten Rechnern vorhanden waren und somit immer angezeigt werden konnten.

Um die Gestaltung von der Auszeichnungssprache zu trennen, wurde 1996 die erste Version der Cascading-Style-Sheets-Spezifikation (CSS) veröffentlicht und beinhaltete dieselben Möglichkeiten.

Seit der Einführung von @font-face bei CSS2 können rein technisch alle Schriften in Websites eingebettet werden. Moderne Browser unterstützten aber bald das Herunterladen fremder Fonts vom Webserver. Der erste Browser, der diese Technik nutzbar machte, war der Internet Explorer der Version 4.0. Der Font-Download wurde später Bestandteil des Fonts-Moduls von CSS3 und wurde seitdem in nahezu allen modernen Browsern implementiert. Dadurch stieg das Interesse an Webtypografie und dem Gebrauch herunterladbarer Schriftarten in Webseiten.

Zur Regelung der Lizenzrechte der im Internet genutzten Schriften (Rechtsschutz von Schriftzeichen) wurde 2009 das Web Open Font Format (WOFF)[1] spezifiziert. Es unterscheidet sich nur gering von den OpenType-Dateien. Eine WOFF-Datei ist ein ZIP-Archiv, das XML-Metainformationen über Lizenz und Hersteller sowie den RawFont enthält. WOFF-Unterstützung gibt es in allen aktuellen Browsern.[2] (Bei Vorgängerversionen des Internet Explorers 9 werden nur Webfonts im Embedded-OpenType-Format (EOT-Format) angezeigt.) Generell ist nicht das Schriftformat, wie TrueType (TTF), OpenType (OT), Scalable Vector Graphics (SVG) oder PostScript ausschlaggebend, sondern das Hinting, welches die Darstellungsqualität der Schrift im Browser und auf dem Bildschirm verbessert.

Das folgende Beispiel zeigt eine Implementation für gängige Browser. Es können weitere Formate, etwa für mobile Endgeräte, definiert werden.[3][4]

/* Definition der Schriftart "MainText" */
@font-face {
  font-family: MainText;
  src: local(Futura-Medium), /* lokale Schriftart-Datei am Computer */
    url('http://example.com/FuturaMedium.woff') format("woff"), /* URL zu WOFF */
    url('http://example.com/FuturaMedium.otf') format("opentype"); /* URL zu OTF */
}

/* Verwendung der geladenen Schrift */
p {
  font-family: MainText;
}

Die Grundlage jeder Bildschirmdarstellung sind Bildpunkte, genannt Pixel (abgeleitet von „Picture Element“). Die ersten Bildschirmschriften waren Pixelfonts. Diese werden so genannt, da sie rein aus Rasterpunkten bestehen und jedes Buchstabenpixel so auf dem Bildschirm angezeigt wird, wie es entworfen wurde, vorausgesetzt, dass das Schriftraster mit dem Bildschirmraster übereinstimmt. Pixelfonts können nachträglich nicht vergrößert werden. Am Anfang der Computertechnik, als die Bildschirmauflösung noch sehr gering war, wurden meist nur Großbuchstaben verwendet, da Kleinbuchstaben in dieser geringen Auflösung nur schwer lesbar waren.

Mit der Entwicklung von hochauflösenden Bildschirmen veränderte sich auch die Webfont-Darstellung. Da die Schriften auf höher aufgelösten Bildschirmen kleiner ausfallen, hat man Webfonts auf 14 bis 16 Pixel vergrößert. Mit der Zeit ging man auch weg von Pixelschriften und hin zu Vektorschriften. Heute werden alle Webfonts zunächst als Vektorgrafiken designt und dann vom jeweiligen Betriebssystem gerastert, d. h. in eine Pixelmatrix umgewandelt, um den Webfont in einem Browser darstellen zu können.

Das Rastern bzw. Rendering hat drei Entwicklungsstufen hinter sich: Zunächst gab es nur die 1-Bit-Methode (auch Schwarz-Weiß-Rendering genannt), danach folgte die Graustufenglättung, heute benutzt man überwiegend die Subpixel-Rendering-Methode, bei der nur eines von drei farbigen Subpixeln (Rot, Grün und Blau) anstatt eines kompletten Pixels angesteuert wird. Dadurch kann eine höhere Schärfe bei der Darstellung von Webfonts erzielt werden. Je nach Browser und Betriebssystem kommen verschiedene Rendering-Methoden zum Einsatz, was zur Folge hat, dass Webfonts von Browser zu Browser unterschiedlich dargestellt werden.

Um die Darstellung von Webfonts zu verfeinern, musste das Rasterverfahren präzisiert werden, dafür wurde das Hinting (vom englischen „Hint“) erfunden und bei den TrueType-Schriften zum Standard erklärt. Beim Hinting werden – wie der Name verrät – Hinweise zum Rastern in der Fontdatei abgespeichert, sodass der Webfont später perfekt ins Pixelraster passt und es nicht zur Unschärfe kommt. Beispielsweise werden Informationen bezüglich der Anpassung des Webfonts an verschiedene Schriftgrößen oder die Wichtigkeit von verschiedenen Linien abgelegt. Für noch prägnantere Ergebnisse übernehmen manche Webfontdesigner das Hinting von Hand. Bei kostenlosen Webfonts wird meist auf das Hinting verzichtet.

Seit der Entwicklung des Web-Open-Font-Formats werden Webfont-Lizenzen verkauft. Die Zahl der Webfont-Anbieter ist stetig gewachsen, ihr Angebot sowie ihre Konditionen sind dabei sehr verschieden. Im Wesentlichen liegen die Unterschiede im Hosting und den Bezahlmethoden. Einige Webfont-Dienste bieten Selbsthosting an, das heißt, per Einmalzahlung erhält man eine Font-Datei und den jeweiligen CSS- oder JavaScript-Code. Somit kann der Webfont auf den eigenen Server hochgeladen und über den Code in die Website eingebettet werden. Bei Anbietern von Open-Source-Schriften ist die Selbsthosting-Lizenz kostenfrei.

Bei den meisten Webfont-Diensten erhält man einen Link zu einem fremden Server, wo der Webfont abgelegt ist. Mittels URL-Angabe unter @font-face wird der Webfont beim Aufruf der Seite geladen.

Icon-Fonts sind Webfonts, die Icons statt Buchstaben darstellen und vor allem als funktionale Piktogramme verwendet werden. Sie sind eine Alternative zu reinen Bilddateien oder CSS-Sprites. Da Icon-Fonts meist als Vektorschriften angelegt werden, können diese grafisch skalieren[8] und haben eine geringere Dateigröße als Pixel-Icons. Es gibt zahlreiche freie Icon-Font-Sets – das bekannteste ist Font Awesome[9] – oder frei konfigurierbare Zusammenstellungen von Icon-Fonts.[10]

• Johannes Bergerhausen, Siri Poarangan: decodeunicode: Die Schriftzeichen der Welt. Hermann Schmidt, Mainz 2011, ISBN 978-3-87439-813-8. Alle 109.242 Schriftzeichen, die man nach Unicode im Web darstellen kann in einem Buch, Deutsch.
• The Unicode Consortium: The Unicode Standard, Version 6.0.0. The Unicode Consortium, Mountain View CA, 2011, ISBN 978-1-936213-01-6. Der offizielle Standard, technisches Manual für IT-Spezialisten, Englisch.

• W3C Working Draft for CSS Fonts
• Real Web Type in Real Web Context Tim Brown, A List Apart, 17. November 2009
• On Web Typography Jason Santa Maria, A List Apart, 17. November 2009
• @font-face auf MDN Web Docs

1. W3C Spezifikation WOFF 5. Mai 2013
2. WOFF - Web Open Font Format. In: Can I use... Support tables for HTML5, CSS3, etc. Abgerufen am 18. April 2023.
3. @font-face - CSS: Cascading Style Sheets. In: MDN Web Docs. Abgerufen am 18. April 2023 (amerikanisches Englisch).
4. src - CSS: Cascading Style Sheets. In: MDN Web Docs. Abgerufen am 18. April 2023 (amerikanisches Englisch).
5. Webdesign mit unüblichen Schriftarten 21. April 2012
6. WordPress setzt auf System Schriften. In: make.wordpress.org. 7. Juli 2016, abgerufen am 20. Januar 2022.
7. Tadelnde Erwähnungen. In: BigBrotherAwards.de. 5. Mai 2017, abgerufen am 28. Juli 2017.
8. Skalierbare, Retina-Display ready Icon Fonts für responsive Webdesigns (Memento vom 27. Mai 2014 im Internet Archive)
9. Archivierte Kopie (Memento des Originals vom 10. November 2014 im Internet Archive)  Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.@1@2Vorlage:Webachiv/IABot/fortawesome.github.io
10. http://www.weloveiconfonts.com/